Sparkline
A 64×16 word-sized trend line with its latest value.
<mm-sparkline label="Queries per hour, last 24 hours" values="[212,168,141,126,133,187,342,561,806,948,1012,1067,1104,1158,1284,1231,1096,1003,874,702,561,432,338,486]"></mm-sparkline>
Guidance
Sparklines are word-sized trend lines, 64×16, that sit beside a number in a KPI tile, a table cell or a sentence. The line is grey; only the last point is marked, with a 3px dot in the key colour, and its value is printed in mono beside it. There are no axes, gridlines or tooltips: a sparkline shows a shape, and the exact values belong to the table or chart it summarises.
It is one image to assistive technology, named by a sentence giving the low, high and latest values, with every value listed after it for screen readers.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
values | values | (number | null)[] | [] | The values, oldest first. Accepts a JSON array in the attribute. null leaves a gap. |
label | label | string | '' | What is measured, e.g. "Queries per hour, last 24 hours". Starts the accessible summary. |
unit | unit | string | '' | Unit printed after the value, after a non-breaking space, e.g. "ms". |
hideValue | hide-value | boolean | false | Hides the printed value, for KPI tiles where the number is already shown large. |
tone | tone | 'primary' | 'info' | 'primary' | Colour of the last-point dot: primary (default) or info. |
width | width | number | 64 | Width in px. Keep it word-sized. |
height | height | number | 16 | Height in px. |
CSS parts
| Part | Description |
|---|---|
svg | The line drawing. |
value | The printed latest value. |
CSS custom properties
| Property | Description |
|---|---|
--mm-chart-key | Colour of the last-point dot. |
Examples
Every state of mm-sparkline in Storybook, with keyboard and screen reader tests.