Sparkline
A tiny trend line with a soft filled area for a list of numbers — in stat tiles, table cells or cards where a full chart is too much. It shows the shape of the trend, scaled between the smallest and the largest value.
Basic
Give it the numbers in order. It fills the width of its container and is 31.5px high; fewer than two values draw nothing.
Tones
tone colours the line and the area: primary (default), info, success, warn, danger.
Stat tiles
In a stat tile the sparkline goes into the default slot, under the value, in the tile tone.
Size
Set a width and height on the host to fit a table cell or a list row; the SVG stretches and the line keeps its thickness.
- Spring sale8,412
- Newsletter2,180
- Retargeting904
Live
values is an input — give it a new array and the line redraws; here the last twelve readings are kept.
Latest: 41% CPU
Accessible
Without ariaLabel a sparkline is decorative and hidden from screen readers — the number next to it tells the story. With ariaLabel it becomes an image with that text; describe the trend, not the points.
Design tokens
dt changes the height, the line width, the area opacity and the tone colours of one sparkline.
Pass through
pt styles the parts — here no area and a dashed line.