Sparkline
Small inline chart that shows a trend.
@paneui/thememotion
Installation
pnpm dlx shadcn@latest add @paneui/sparklineUsage
Examples
Colour and size
The chart draws in currentColor, so tint it with a text token (text-success, text-chart-1). It stretches to its box, so size it with h-* and w-* (default 36px tall, full width).
Missing data
null, undefined and NaN are gaps. bridge joins the known points either side with a faint dashed line (bars get a faint stub), break leaves the space empty and zero plots 0. A series with no points, or one point, draws a flat dashed baseline, plus a dot for the point.
Accessibility
With label it is an img with that name; without one it is decorative (aria-hidden). Put the number it summarises in text next to it.
Sparkline
Also accepts every prop of svg.
- values*
- readonly (number | null | undefined)[]
- The series, oldest first.
null,undefinedandNaNare missing points. - gap= "bridge"
- "bridge" | "break" | "zero"
- How missing points draw.
- variant= "area"
- "area" | "line" | "bar"
- Shape.
- label
- string
- Accessible summary. Omit to make the chart decorative.
- animate= true
- boolean
- Draw in on mount (always off under reduced motion).
| Prop | Type | Default | Description |
|---|---|---|---|
| values* | readonly (number | null | undefined)[] | — | The series, oldest first. null, undefined and NaN are missing points. |
| gap | "bridge" | "break" | "zero" | "bridge" | How missing points draw. |
| variant | "area" | "line" | "bar" | "area" | Shape. |
| label | string | — | Accessible summary. Omit to make the chart decorative. |
| animate | boolean | true | Draw in on mount (always off under reduced motion). |