Data
Sparkline
A run of numbers at the size of a word.
When to reach for it
In a table cell, beside a figure, at the end of a row. When the trend needs reading precisely it wants a LineChart and its own space.
Examples
variants
61
61
61
in a table
| Channel | Trend | This week |
|---|---|---|
| Organic search | 71k | |
| Paid social | 28k | |
| Direct | 29k | |
| Referral | 24k |
Notes
A run of numbers at the size of a word — in a table cell, beside a figure, at the end of a row.
Deliberately axis-less, gridless and label-less: a sparkline answers "what shape has this been", and every piece of chrome that would make it answer "what value exactly" also makes it too big to sit inline, which was the only reason to reach for it. When the exact value matters, print the number beside it — value does — and when the trend needs reading precisely, it wants a <LineChart> and its own space.
No rendering engine: it is one <path> over a normalised viewBox, so it costs nothing to put a hundred of them in a table.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| datarequired | number[] | The numbers, in order. Anything shorter than two points draws nothing. | |
| labelrequired | string | What the run is, in a sentence. Required, and it is the whole accessible name: a sparkline has no axes and no legend, so nothing else describes it. | |
| className | string | — | |
| domain | [number, number] | The domain, as `[min, max]`. Derived from the data when omitted. Pin it whenever a column of sparklines is meant to be compared: on independent domains every row peaks and troughs identically, which is the one way a table of sparklines can be actively misleading. | |
| height | number | 28 | Height in pixels. The width comes from the container. |
| showLast | boolean | true | Marks the last point, which is usually the one being asked about. |
| value | ReactNode | The value announced alongside the label — the current reading, formatted. Falls back to the last number. | |
| variant | SparklineVariant | 'line' | — |
Types
export type SparklineVariant = 'line' | 'area' | 'bars'Accessibility
- label is required and is the whole accessible name: a sparkline has no axes and no legend, so nothing else describes it.
- Axis-less by design. Every piece of chrome that would let it answer “what value exactly” also makes it too big to sit inline, which was the only reason to reach for it.
- Pin domain for a column of them: on independent domains every row peaks and troughs identically, which is how a table of sparklines becomes actively misleading.
- One path, no rendering engine — so a hundred of them in a table cost nothing.