BarChart

Category comparisons, vertical by default or horizontal for ranked lists and long labels. See Charts overview for the loading, empty, events and ref props shared by every chart.

Basic

<BarChart  theme={resolvedTheme}  ariaLabel="Orders by region"  categories={['North', 'South', 'East', 'West']}  series={[{ name: 'Orders', data: [420, 332, 301, 234] }]}  showLegend={false}/>

Horizontal

horizontal moves the category axis to the left — better for ranked categories or long labels.

<BarChart  horizontal  showLegend={false}  ariaLabel="Requests by channel"  categories={['Email', 'Chat', 'Phone', 'Social', 'Portal']}  series={[{ name: 'Requests', data: [1280, 960, 720, 540, 410] }]}/>

Reference lines

referenceLines draws target or threshold lines across the value axis, each with an optional label and colour.

<BarChart  showLegend={false}  ariaLabel="Resolution time by team against target"  categories={['Alpha', 'Bravo', 'Charlie', 'Delta']}  series={[{ name: 'Hours', data: [18, 27, 12, 33] }]}  referenceLines={[    { value: 24, label: 'SLA' },    { value: 16, label: 'Target' },  ]}/>

Props

Prop	Type	Default	Notes
`categories / series`	`(string \| number)[] / Series[]`	—	Category labels and named series of numbers.
`horizontal`	`boolean`	`false`	Category axis on the left; value axis along the bottom.
`stack`	`boolean`	`false`	Stack series into a cumulative total.
`dataZoom`	`boolean`	`false`	Slider and drag-to-zoom, bound to the category axis.
`referenceLines`	`{ value, label?, color? }[]`	—	Target or threshold lines across the value axis.
`valueFormatter`	`(value: number) => string`	—	Format values on the value axis and in tooltips.
`colors`	`string[]`	—	Override the theme palette; one colour per series.