Line chart

Grey-first time series with one key line, direct labels and annotations.

Guidance

Line charts show change over time, grey first: context series in mm-text-3, and one key series in burnt sienna (or slate with tone="info"), the only colour on the chart. Lines are labelled directly at their ends in 13px mono, so there is no legend. The axes are range frames that span only the data's minimum to maximum, labelled at their endpoints, with at most three dotted gridlines and no chart box.

Annotate like a technical drawing: annotations takes points (a leader line with a dot terminal and a mono caption, e.g. "Snowflake warehouse resize") and ranges (a dimension bracket, e.g. an incident window). Set estimated to the number of trailing points that are incomplete, such as the current hour: that tail is dashed and hatched, and marked "est.".

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. Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/ (focusable image with an active point).

Properties

Property	Attribute	Type	Default	Description
series	series	LineSeries[]	[]	The lines. One has key: true; the others are grey context.
area	area	boolean	false	Fill the key series with a flat 10% tint.
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 key series.
--mm-chart-ground	The ground behind the chart, used for label halos. Defaults to --mm-paper.

Examples

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