Sparkline
A trend at a glance: one small line, no axes, its last point marked, for a table row or beside a number.
import { Sparkline } from "@butteryui/react";Demo
When to use it
Use it for
- A trend beside the number it belongs to, in a card or a table row
- Many small trends to scan, one per row
Not for
- Reading values off it: use LineChart, which has axes and a tooltip
- Comparing series: use LineChart
Examples
Orders trend
Two weeks of orders as a sparkline that fills the row beside the total it adds up to.
1,284
Refunds trend
Refunds over two weeks in the rose chart color, with a gap for days with no data.
Roast sales
A sales list with each roast's trend in its row, beside the total it adds up to; the week switch redraws every line.
Variants and states
Beside their numbers
Each fills its column; the last value is marked and a missing day leaves a gap.
Props
Sparkline
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | Names the trend for screen readers, such as "Orders, last 30 days". | |
valuesrequired | readonly (number | null)[] | The values, oldest first; null, or a value that isn't a finite number, leaves a gap. | |
color | ChartColor | chart-1 | Its color. Defaults to chart-1. |
It also takes Omit<ComponentPropsWithRef<"span">, "children">.
Accessibility
An image named by its label. It has no tooltip or Tab stop, so write the numbers it summarizes beside it.
It takes no keyboard input of its own.
Motion
It doesn't move.
With reduced motion: Nothing changes.
Layout
It fills its container's width (in an Inline, the room its siblings leave) at a fixed 24px tall, drawing its 2px line inside 4px of padding so the stroke and the 6px dot on the last value stay inside its box. It holds no text and takes no input, so it has nothing to truncate and no hit area.
Related
See it in the roastery demo's wholesale.