Bar Chart

A bar chart uses rectangular bars to show values, with one axis for categories and the other for values. It’s great for visualizing data like months, age groups, or product types. Bar charts help compare different categories and track trends over time. With REAVIZ, you can easily create and customize bar charts to suit your data visualization needs!

Types supported by reaviz:

Single Series Vertical / Horizontal
Multi Series Vertical / Horizontal
Target Markers Vertical / Horizontal
Stacked Vertical / Horizontal
Stacked Normalized Vertical / Horizontal
Stacked Diverging Vertical / Horizontal
Marimekko
Sparkline
Waterfall
Histograms

Where to use:

Compare Quantities: Compare different categories, like sales figures.
Highlight Largest/Smallest Categories: Identify categories with highest or lowest values.
Visualize Categorical Data: Display distinct categories, such as age groups or product types.

Quick Start

To create a Bar chart, use import the BarChart and give it data. The chart will automatically configure itself with the default options exposed via props.

import { BarChart } from 'reaviz';


export default function App() {
return (
  <BarChart
    height={300}
    width={300}
    data={[
      { key: 'DLP', data: 13 },
      { key: 'SIEM', data: 2 },
      { key: 'Endpoint', data: 7 }
    ]}
  />
);
}

import { BarChart } from 'reaviz';

export default function App() {
return (
  <BarChart
    height={300}
    width={300}
    data={[
      { key: 'DLP', data: 13 },
      { key: 'SIEM', data: 2 },
      { key: 'Endpoint', data: 7 }
    ]}
  />
);
}

Examples

Single Series Vertical

Single Series Horizontal

Multi Series Vertical

Multi Series Horizontal

Target Markers Vertical

Target Markers Horizontal

Stacked Vertical

Stacked Horizontal

Stacked Normalized Vertical

Stacked Normalized Horizontal

Stacked Diverging Vertical

Stacked Diverging Horizontal

Marimekko

Sparkline

Waterfall

Histograms

Customization

Customize the Bar Chart using various props:

colorScheme: Array of colors for the chart.
gridlines: Toggle gridlines on or off.
bar: Customize the appearance of the bars.
legend and tooltips: Add legends and tooltips for better data interpretation.

API

BarChart

Name	Type	Default
`data`	`ChartDataShape[]` Data the chart will receive to render.	`[]`
`series`	`ReactElement<BarSeriesProps, FC<Partial<BarSeriesProps>>>` The series component that renders the bar components.	`<BarSeries />`
`yAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the Y Axis of the chart.	`<LinearYAxis type="value" />`
`xAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the X Axis of the chart.	`<LinearXAxis type="category" tickSeries={<LinearXAxisTickSeries tickSize={20} />} />`
`gridlines`	`ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>> \| null` The chart’s background gridlines component.	`<GridlineSeries />`
`brush`	`ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>> \| null` The chart’s brush component.
`secondaryAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]` Any secondary axis components. Useful for multi-axis charts.
`id`	`string` Id of the chart.
`width`	`number` Width of the chart. If not provided will autosize.
`height`	`number` Height of the chart. If not provided will autosize.
`margins`	`Margins` Margins for the chart.
`className`	`string` Classnames for the chart.
`containerClassName`	`string` Classnames for the chart.
`style`	`StyleHTMLAttributes<SVGSVGElement>` Additional css styles.
`center`	`boolean` Center the chart. Used mainly internally.
`centerX`	`boolean` Center chart on X Axis only. Used mainly internally.
`centerY`	`boolean` Center chart on Y Axis only. Used mainly internally.

BarSeries

Name	Type	Default
`data`	`ChartInternalDataShape[]` Parsed data shape. Set internally by `BarChart`.
`id`	`string` Id of the bar chart. Set internally by `BarChart`.
`xScale`	`any` D3 scale for X Axis. Set internally by `BarChart`.
`yScale`	`any` D3 scale for Y Axis. Set internally by `BarChart`.
`xScale1`	`any` D3 scale for X Multi-Group Axis. Set internally by `BarChart`.
`bar`	`BarElement \| BarElement[]` Bar element.	`<Bar />`
`type`	`BarType` Type of the chart.	`'standard'`
`colorScheme`	`ColorSchemeType` Color scheme for the chart.	`'cybertron'`
`animated`	`boolean` Whether the chart is animated or not.	`true`
`padding`	`number` Amount of padding between each bar.	`0.1`
`groupPadding`	`number` Amount of padding between each group.	`16`
`isCategorical`	`boolean` Whether the chart is categorical or not. Set internally by `BarChart`.
`layout`	`Direction` Direction of the chart	`'vertical'`
`binSize`	`number` The size of each bin/bucket in the bar chart.
`height`	`number` Height of the chart. Set internally by `BarChart`.
`width`	`number` Width of the chart. Set internally by `BarChart`.
`tooltip`	`ReactElement<TooltipAreaProps, ForwardRefExoticComponent<Partial<TooltipAreaProps> & RefAttributes<any>>> \| null` Tooltip for the chart area.	`<TooltipArea tooltip={<ChartTooltip followCursor modifiers={[offset(5)]} />} />`
`valueMarkers`	`ReactElement<LinearValueMarkerProps, FC<LinearValueMarkerProps>>[] \| null` Value markers line for the chart.

Bar

Name	Type	Default
`active`	`boolean` Whether the bar is active or not.
`activeBrightness`	`number` Chroma brightness factor to brighten the active bar. See https://gka.github.io/chroma.js/#color-brighten for more info.	`0.5`
`xScale`	`any` D3 scale for X Axis. Set internally by `BarChart`.
`yScale`	`any` D3 scale for Y Axis. Set internally by `BarChart`.
`xScale1`	`any` D3 scale for X Multi-Group Axis. Set internally by `BarChart`.
`data`	`ChartInternalShallowDataShape` Parsed data shape. Set internally by `BarChart`.
`id`	`string` Id set internally by `BarChart`.
`gradient`	`ReactElement<GradientProps, FC<Partial<GradientProps>>> \| null` Gradient shades for the bar.	`<Gradient />`
`rx`	`number` SVG rx attribute for the bar.	`0`
`ry`	`number` SVG ry attribute for the bar.	`0`
`width`	`number` Width of the bar. Set internally by `BarSeries`.
`padding`	`number` Padding for the bar groups.
`barCount`	`number` Total number of bars used for animation. Set internally by `BarSeries`.
`color`	`any` Color callback for the bar.
`cursor`	`string` Cursor for the bar element.	`'auto'`
`barIndex`	`number` Index of the bar. Set internally by `BarSeries`.
`groupIndex`	`number` Index of the group. Set internally by `BarSeries`.
`animated`	`boolean` Whether to animate the enter/update/exit. Set internally by `BarSeries`.
`isCategorical`	`boolean` Whether this is categorical chart or not. Set internally by `BarSeries`.
`rangeLines`	`ReactElement<RangeLinesProps, FC<Partial<RangeLinesProps>>> \| null` Rangelines element. for the bar.
`mask`	`ReactElement<MaskProps, FC<MaskProps>> \| null` Mask element for the bar.
`tooltip`	`ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>> \| null` Tooltip element.
`layout`	`Direction` Direction of the chart. Set internally by `BarSeries`.	`'vertical'`
`type`	`BarType` Type of bar chart. Set internally by `BarSeries`.
`label`	`ReactElement<BarLabelProps, FC<Partial<BarLabelProps>>> \| null` Label element.
`targetMarker`	`ReactElement<BarTargetMarkerProps, FC<Partial<BarTargetMarkerProps>>> \| null` Target marker element.	`<BarTargetMarker />`
`guide`	`ReactElement<GuideBarProps, FC<Partial<GuideBarProps>>> \| null` Guide bar component.
`minHeight`	`number` Force a min height on the bar.
`glow`	`Glow` Glow styling for the bar.
`onClick`	`(event: ClickEvent) => void` Event for when the bar is clicked.
`onMouseEnter`	`(event: any) => void` Event for when the bar has mouse enter.
`onMouseLeave`	`(event: any) => void` Event for when the bar has mouse leave.
`onMouseMove`	`(event: any) => void` Event for when a bar has mouse move.
`className`	`any` Classnames to apply to the element.
`style`	`any` CSS styles to apply to the element.

GuideBar

Name	Type	Default
`active`	`boolean` Whether the guide bar is active.
`fill`	`string` Fill for the guide bar element.	`'#eee'`
`opacity`	`number` Opacity for the guide bar element.	`0.15`

RangeLines

Name	Type	Default
`height`	`number` Height of the bar.
`width`	`number` Width of the bar.
`x`	`number` SVG x attribute for the bar.
`y`	`number` SVG y attribute for the bar.
`index`	`number` Group index or index of the bar. Set internally by `BarSeries`.
`strokeWidth`	`number` Stroke width of the range line.	`1`
`scale`	`any` D3 scale for Axis. Set internally by `BarChart`.
`position`	`"top" \| "bottom"` Position of the range line.	`'top'`
`data`	`ChartInternalShallowDataShape` Parsed data shape. Set internally by `BarChart`.
`color`	`string` Color for the range line.
`barCount`	`number` Total number of bars used for animation. Set internally by `BarSeries`.
`layout`	`Direction` Direction of the chart. Set internally by `BarSeries`.	`'vertical'`
`animated`	`boolean` Whether to animate the enter/update/exit. Set internally by `BarSeries`.
`type`	`BarType` Type of bar chart. Set internally by `BarSeries`.

BarLabel

Name	Type	Default
`text`	`string` Text of the label. Set internally by `Bar`.
`height`	`number` Height of the bar.
`width`	`number` Width of the bar.
`x`	`number` SVG x attribute for the bar.
`y`	`number` SVG y attribute for the bar.
`index`	`number` Group index or index of the bar. Set internally by `BarSeries`.
`scale`	`any` D3 scale for Axis. Set internally by `BarChart`.
`position`	`"top" \| "center" \| "bottom"` Position of the label.	`'top'`
`data`	`ChartInternalShallowDataShape` Parsed data shape. Set internally by `BarChart`.
`fill`	`string` Color of the text.	`'#000'`
`barCount`	`number` Number of the bars in the bar group. Set internally by `BarSeries`.
`layout`	`Direction` Layout of bar chart to render. Set internally by `BarSeries`.	`'vertical'`
`animated`	`boolean` Whether to animate the enter/update/exit. Set internally by `BarSeries`.
`type`	`BarType` Type of bar chart to render. Set internally by `BarSeries`.
`fontSize`	`number` Font size of the text.	`13`
`fontFamily`	`string` Font family of the text.	`'sans-serif'`
`padding`	`number` Padding of the label.	`5`
`className`	`any` Class name to apply to the text.