Data viz
Sparkline
A word-sized chart — trend at a glance, no axes, no chrome. Made to live inside a table cell, a stat card, or a sentence. Drawn as plain inline SVG so dozens render instantly with zero load.
npx shadcn@latest add @orbit/sparklineOverview
Word-sized: a headline number gets its recent history without a second line of space.
Variants
Line for a pure trend, area to emphasize volume, bars for discrete periods, and win/loss for binary streaks like passing builds.
Color
Pick a palette color to match a series, or let color="trend" resolve success or danger from the first-to-last direction.
In a table
Their best home: one micro-chart per row turns a wall of numbers into a scannable shape.
| Project | Tasks | Δ | 12-wk trend |
|---|---|---|---|
Orbit redesignORB | 248 | 12% | |
Mobile appMOB | 186 | 6% | |
Billing v2BIL | 92 | 8% | |
Data platformDAT | 154 | 3% |
In stat cards
A sparkline gives a headline number its recent history without taking a second line of space.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | number[] | — | The series. A sparkline is always single-series — no legend, no axes. |
| variant | "line" | "area" | "bar" | "winloss" | "line" | Chart shape. winloss draws ± bars around a midline and ignores color. |
| color | "accent" | "trend" | "violet" | "teal" | string | "accent" | accent = var(--pri); trend resolves success (up) or danger (down) from first vs. last; or pass any token / color-mix string. |
| width | number | 120 | Fixed width in px. |
| height | number | 32 | Fixed height in px. |
| showDot | boolean | true | Surface-cored dot on the last point (line and area). |
| strokeWidth | number | 1.75 | Line stroke width. |
| ariaLabel | string | — | Plain-language summary for the svg's role=“img”. Defaults to a generated trend sentence. |
| …rest | HTMLAttributes<HTMLSpanElement> | — | Forwarded to the root span, including ref and className. |
Usage
A sparkline shows shape, not precise values — pair it with the number it summarizes.
Pair with the number
The sparkline gives shape; the adjacent value gives the magnitude. Always show both.
Add axes or labels
Gridlines and ticks defeat the purpose — if you need to read exact values, use a full chart.
Keep a consistent size
In a column, every sparkline should share width and height so rows compare honestly.
Cram in too many points
Past ~30 points the shape turns to noise at this size — aggregate to weeks or sprints.
Keyboard & accessibility
The sparkline renders as a labelled image; the adjacent number carries the exact value.