Proportion bar

A single grey stacked bar with direct labels, replacing the donut.

Guidance

The proportion bar replaces the donut. It is a single horizontal bar split into segments in alternating greys, with one segment highlighted in the key colour, and each segment labelled directly in 13px mono with its share, using leader lines when segments are too narrow for their labels. Small segments (below threshold of the total) are grouped as "Other", so the bar never needs a legend or a rainbow of categories.

Add list to attach a ranked list below it with every item's count and share, as on Insights (asset types next to their counts). The list shows grouped items individually.

Keyboard: Tab to the bar, then Left and Right move between segments and show the tooltip; Home and End jump to the ends; Escape hides the tooltip.

Properties

Property	Attribute	Type	Default	Description
data	data	ProportionDatum[]	[]	The parts of the whole, in any order. They are ranked largest first.
highlight	highlight	string	''	Label of the one segment drawn in the key colour. It is never grouped into "Other".
threshold	threshold	number	0.02	Segments smaller than this share of the total are grouped as "Other".
maxSegments	max-segments	number	6	At most this many segments, including "Other".
list	list	boolean	false	Attach a ranked list of every item with its count and share.
unit	unit	string	''	Unit after counts in the tooltip and list, e.g. "assets".
categoryLabel	category-label	string	''	Heading for the items in the tooltip and table, e.g. "Asset type".
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 bar region.
plot	The SVG drawing.
list	The attached ranked list.
message	The empty or error sentence.

CSS custom properties

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

Examples

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