Bar Chart
Grouped, stacked, and horizontal bars for comparing values across categories. Supports multiple series with automatic colour assignment from the chart palette.
Examples
Multiple series
Stacked
Horizontal
Props
data*
Record<string, string | number>[]
Array of data objects, one per bar group.
index*
string
Key used as the category axis label.
categories*
string[]
Keys to render as bar series.
colors= palette
string[]
Override chart palette colours for this instance.
stacked= false
boolean
Stack bars instead of grouping side-by-side.
layout= 'vertical'
'vertical' | 'horizontal'
Vertical = bars grow upward. Horizontal = bars grow rightward.
valueFormatter= —
(value: number) => string
Format values on the axis and in the tooltip.
showLegend= auto
boolean
Show series legend. Auto-shown when categories.length > 1.
showGrid= true
boolean
Show a background grid.
height= 300
number
Fixed height of the chart in px.
className= —
string
Extra class on the outer container.
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | Record<string, string | number>[] | — | Array of data objects, one per bar group. |
| index* | string | — | Key used as the category axis label. |
| categories* | string[] | — | Keys to render as bar series. |
| colors | string[] | palette | Override chart palette colours for this instance. |
| stacked | boolean | false | Stack bars instead of grouping side-by-side. |
| layout | 'vertical' | 'horizontal' | 'vertical' | Vertical = bars grow upward. Horizontal = bars grow rightward. |
| valueFormatter | (value: number) => string | — | Format values on the axis and in the tooltip. |
| showLegend | boolean | auto | Show series legend. Auto-shown when categories.length > 1. |
| showGrid | boolean | true | Show a background grid. |
| height | number | 300 | Fixed height of the chart in px. |
| className | string | — | Extra class on the outer container. |