BarChart

Vertical and horizontal bar charts with support for single series, grouped bars, and stacked bars.

Playground

Experiment with different settings:

Midnight

orientation

showLabels

OffOn

barRadius

Code

<BarChart
  data={data}
  theme="midnight"
  orientation="vertical"
  barRadius={4}
/>

Pass an array of keys to create grouped bars:

revenue

expenses

tsx

<BarChart
  data={data}
  dataKey={['revenue', 'expenses']}
  categoryKey="month"
  theme="midnight"
/>

Prop	Type	Default	Description
`data*`	`T[]`	-	Data array
`dataKey*`	`keyof T \| (keyof T)[]`	-	Key(s) for bar values
`categoryKey*`	`keyof T`	-	Key for category axis
`width`	`number`	`500`	Chart width
`height`	`number`	`300`	Chart height
`theme*`	`ThemeName`	-	Theme name
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Bar orientation
`showLabels`	`boolean`	`false`	Show value labels
`format`	`(value: number) => string`	-	Value formatter
`barGap`	`number`	`0.1`	Gap between bars (0-1)
`groupGap`	`number`	`0.2`	Gap between groups (0-1)
`barRadius`	`number`	`4`	Bar border radius