Area chart

One key series over a flat tint.

Guidance

Area charts show one quantity over time, such as assets catalogued per day, as a key line over a flat 10% tint of the same colour, never a gradient. They carry the key series only: when you need context series, use mm-line-chart. The fill runs down to zero, so the range-frame y axis spans zero to the maximum, labelled at both ends, with at most three dotted gridlines and no box. Estimated trailing points (estimated) are dashed and hatched instead of tinted, and annotations take the same leader and dimension-bracket notes as the line chart.

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

Properties

Property	Attribute	Type	Default	Description
values	values	(number | null)[]	[]	One value per x, oldest first. null leaves a gap.
name	name	string	''	Series name, printed at the line end, e.g. "Catalogued". Defaults to label.
x	x	XValue[]	[]	The x values, oldest first: Dates, ISO strings or numbers. Times are formatted in time-zone.
unit	unit	string	''	Unit after each value, after a non-breaking space, e.g. "ms".
estimated	estimated	number	0	How many trailing points are estimated (an incomplete hour or day). They are dashed and hatched.
annotations	annotations	ChartAnnotation[]	[]	Point annotations and ranges such as an incident window.
xLabel	x-label	string	''	Heading for the x values in the tooltip and the data table.
timeZone	time-zone	string	'UTC'	IANA time zone for time labels. UTC by default so server and browser agree.
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 line and its tint.
--mm-chart-ground	The ground behind the chart, used for label halos. Defaults to --mm-paper.

Examples

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