Bar chart

Magnitude by category: vertical or horizontal, grouped or stacked, with optional value labels.

When to use it

Horizontal for long category names. One series is one colour; a datum’s own color is for status (won, overdue), not decoration. On a stack, labels show the total.

Grouped, stacked and horizontal

Options

Everything you can pass to Bar chart.

Prop	Type	Default	What it does
categories	string[]	—	The x-axis labels, in order.
series	{ name, data: (number \| null)[], color? }[]	—	Colours default to --chart-1… in order. null is a gap.
legend	boolean	2+ series	HTML legend above the plot.
data	{ name, value, color? }[]	—	Single-series shorthand instead of categories + series.
horizontal	boolean	false	Bars grow rightwards, categories top to bottom.
stacked	boolean	false	Segments separated by a surface gap.
labels	boolean	false	Value at each bar end; the total on a stack.
height	number \| string	—	Plot height. The HTML legend sits outside it.
valueFormatter	(value) => string	en-IN, 2 dp	Axis labels, tooltips, value labels and the hidden data table.
aria-label	string	—	What the chart shows. Also captions its hidden data table.
loading / emptyTitle / emptyDescription	boolean / string	—	Passed to Chart: skeleton, and the empty state when every value is zero.