Sparkline
NewA tiny trend line that sits beside a figure, in a stat or a table row, to show which way it has been heading. Reach for it when the shape matters more than the values; for values, use an area chart.
Basics
Pass the values oldest first. The line is a smooth curve that never overshoots the data, drawn 1.5px wide with round caps. showEnd marks the latest value with a dot and fill lays a soft wash beneath the line.
Tones
tone sets the colour by meaning, never by the data. A line does not turn red because it fell: say whether a change is good news with a Delta beside it.
| Tone | Use it for |
|---|---|
accent | The default. Any trend that is not itself a status: orders, takings, visitors to a page. |
positive | A status that is good news as a whole, such as payments settling or orders dispatched on time. |
negative | A status that is bad news as a whole, such as refunds or failed payments. |
neutral | Context that should sit back: a comparison, a secondary figure, a line in a dense table. |
In both themes
In dark the accent turns mint and the status hues lift, so each line keeps its contrast on the night canvas.
Sizes
width and height are in pixels, 96 by 28 by default. The stroke stays 1.5px at every size, and the plot insets itself so round caps and the end dot are never clipped.
In a stat and a table
Beside a figure, the sparkline shows the shape and the Delta says whether it is good news. Stats sit on a hairline strip rather than in a row of cards, the same way the headline figures do on the home.
In a table row
Small and quiet: 64 by 20, no end dot, so a column of lines reads as texture rather than a row of alarms.
| Product | Last 14 days | Sales |
|---|---|---|
| Arden ergonomic chair | £18,240.00 | |
| Oslo sit-stand desk, oak | £14,980.00 | |
| Lumen desk lamp | £6,210.00 |
Flat and missing data
With fewer than two values, or values that never change, the sparkline draws a level line through the middle, so a quiet fortnight still reads as a line rather than an empty gap. Values that are not finite are skipped.
Motion
The line draws itself in once, left to right, over 600ms when it first appears; the wash settles in after it and the end dot pops at the end of the stroke. When the data changes later, the new line simply replaces the old one. With reduced motion on, the line and the dot fade in instead.
Guidelines
- Give it a label when the line is the only place the trend appears. Leave it decorative when a figure and a delta beside it already say the same thing.
- Seven to thirty points reads best. Beyond that the curve smooths into a blur; use an area chart with dates.
- Keep the same range across a row of sparklines, such as the last 14 days, and say so once in the heading or a label.
Accessibility
- Decorative by default: without a
labelthe SVG is hidden from assistive tech. - With a
labelit becomes an image with that name. Describe the trend, not the drawing: "Orders over the last 14 days, rising". - It is never focusable, so it adds no tab stops to a table.
- The draw and the pop respect reduced motion: both fade in instead.
Props
Also accepts SVG attributes, except width, height, fill and children.
| Prop | Type | Default | Description |
|---|---|---|---|
dataRequired | readonly number[] | None | Values in order, oldest first. Empty or flat data draws a level line. |
width | number | 96 | Width in px. |
height | number | 28 | Height in px. |
tone | 'accent' | 'positive' | 'negative' | 'neutral' | 'accent' | Line colour by meaning. Status tones only for status. |
showEnd | boolean | false | Marks the latest value with a dot. |
fill | boolean | false | A soft wash under the line. |
label | string | None | Accessible description of the trend. Decorative when omitted. |