Bar Chart

The BarChart component visualizes labeled numeric values as accessible vertical bars.

Usage & Examples

Monthly Volume

Monthly volume

monthly-volume.tsx

const chartData = [
  { label: "Jan", value: 24, color: "#2f80ed" },
  { label: "Feb", value: 38, color: "#27ae60" },
  { label: "Mar", value: 31, color: "#f2994a" },
  { label: "Apr", value: 47, color: "#9b51e0" },
]; 


<BarChart data={chartData} label="Monthly volume" />

Props API

Bar Chart props API
				Default	Description
`aria-label`	`string`	No	aria	`—`	Accessible label for the chart graphic.
`className`	`string`	No	styling	`—`	Additional class name for the root.
`data`	`ChartDatum[]`	Yes	props	`—`	Labelled values rendered as vertical bars.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`gap`	`number`	No	props	`8`	Gap between bars in SVG units.
`height`	`number`	No	props	`180`	Height of the SVG viewport.
`label`	`ReactNode`	No	props	`—`	Visible chart label.
`loading`	`boolean`	No	props	`false`	Whether the component should display a loading state.
`padding`	`number`	No	props	`24`	Inner SVG padding.
`showGrid`	`boolean`	No	props	`true`	Whether to render horizontal guide lines.
`showLabels`	`boolean`	No	props	`true`	Whether to render category labels below bars.
`state`	`StateType`	No	styling	`—`	Visual state class used for styling.