Sparkline · BarMini Widget
Shape of a series, sized to sit inside a Statistic. No axis, no scale, no tooltip — the moment you need those, reach for a charting library.
Usage
Revenue
35.2M
+9.4%Signups
18
+3<Sparkline values={revenue} filled hue="teal" label="Revenue trend" /><BarMini values={signups} hue="violet" label="Signups per day" />
<Statistic label="Revenue" value="35.2M" visual={<Sparkline values={revenue} filled />} />The cases that break naive versions
- A flat series sits on the middle line, not on the floor. Dividing by a zero range is how a steady metric renders as a crash.
- A single point is centred rather than pinned to the left edge.
- A zero-height bar keeps a one-pixel foot, so "none" is visible as a bar rather than absent.
- Non-finite values are filtered out before anything is measured.
Do
Give it a label that names the series — 'Revenue trend', not 'Chart'.
Don't
Ask people to read values off it. It shows direction; the number belongs next to it.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| values | number[] | — | In order. Non-finite entries are ignored. |
| width / height | number | 120 / 32 | The drawing box, in px. |
| tone / hue | Tone | DecorHue | tone='brand' | Line and fill colour. |
| filled | boolean | false | Sparkline only: fills under the line. |
| showLast | boolean | true | Sparkline only: dot on the final point. |
| label | string | — | Required accessible name. |