BarChart

Series are grouped by default; add stacked to stack them.

2024
2025

Charts animate in when they appear, and when the data changes the bars glide to their new height. Press the button to try it; animate={false} turns it off.

Props

labelsstring[]
Names of the x positions / categories.
series{ name, values: number[], color? }[]
One entry per series; values has one number per label.
heightnumber
Default: 300
Chart height in px (width follows the container).
labelstring
Accessible name for the chart.
legendboolean
Default: true
Show the legend when there are several series.
stackedboolean
Default: false
Stack series instead of grouping them.
animateboolean
Default: true
Animate the chart in when it appears and glide it to new values when the data changes (skipped for users who prefer reduced motion).
classNamestring
Default: ''
Extra classes for the root element.

BarChart props
Prop	Type	Default	Description
`labels`	string[]	–	Names of the x positions / categories.
`series`	{ name, values: number[], color? }[]	–	One entry per series; `values` has one number per label.
`height`	number	`300`	Chart height in px (width follows the container).
`label`	string	–	Accessible name for the chart.
`legend`	boolean	`true`	Show the legend when there are several series.
`stacked`	boolean	`false`	Stack series instead of grouping them.
`animate`	boolean	`true`	Animate the chart in when it appears and glide it to new values when the data changes (skipped for users who prefer reduced motion).
`className`	string	`''`	Extra classes for the root element.