Bar chart

Grey bars with one highlighted, direct value labels, vertical or ranked horizontal.

Guidance

Bar charts compare categories. Bars are grey with square tops; one bar can be highlighted in the key colour (highlight), the only colour on the chart. Values are printed directly at the bar ends in 13px mono; when bars are too narrow for every label, only the highlighted and largest bars are labelled and a range-frame axis appears instead. Estimated or stale bars are hatched, never recoloured.

orientation="horizontal" is the ranked-list form (failed runs per pipeline, queries per agent), with the category names in a column and sort="desc" to rank them. Stacked bars take stack (at most three names) and values per bar: the first two segments are greys and the third is the key colour, labelled directly beside the last bar instead of in a legend.

Keyboard: Tab to the chart, then the arrow keys move between bars and show the tooltip; Home and End jump to the ends; Escape hides the tooltip.

Properties

Property	Attribute	Type	Default	Description
data	data	BarDatum[]	[]	The bars, in order.
orientation	orientation	'vertical' | 'horizontal'	'vertical'	vertical (default) or horizontal, the ranked-list form.
highlight	highlight	string	''	Label of the one bar drawn in the key colour.
stack	stack	string[]	[]	Names of stacked segments, at most three: two greys, then the key colour.
unit	unit	string	''	Unit after each value, after a non-breaking space.
sort	sort	'none' | 'desc' | 'asc'	'none'	none keeps the given order; desc or asc ranks the bars.
categoryLabel	category-label	string	''	Heading for the categories in the tooltip and table.
valueLabel	value-label	string	''	Heading for the values in the tooltip and table.
label	label	string	''	What is measured, in sentence case, e.g. "Queries per hour". Starts the summary sentence and names the table.
summary	summary	string	''	Replaces the generated summary sentence read by screen readers.
height	height	number	240	Plot height in px.
defaultWidth	default-width	number	640	Width used before the first measurement and on the server, in px.
loading	loading	boolean	false	Shows the topographic loading field (after 200ms, for at least 400ms).
error	error	string	''	An error sentence. When set, the chart draws its empty frame with this sentence.
emptyText	empty-text	string	''	Sentence shown when there is no data.
tone	tone	'primary' | 'info'	'primary'	Key series colour: primary (burnt sienna, default) or info (slate). The only colour on the chart.
activeIndex		number		Index of the focused or hovered data point, or -1.

CSS parts

Part	Description
frame	The focusable plot region.
plot	The SVG drawing.
message	The empty or error sentence.

CSS custom properties

Property	Description
--mm-chart-key	Colour of the highlighted bar or key segment.
--mm-chart-ground	The ground behind the chart, used for label halos. Defaults to --mm-paper.

Examples

Every state of mm-bar-chart in Storybook, with keyboard and screen reader tests.