Sparkline
A compact, inline trend line/area/bar — a chart small enough to sit in a sentence or a tile.
@garn/ui/sparklineDefault
A toned line sparkline trending up.
Variants
line · area · bar side by side.
In Stat
An area spark docked in Stat.Trend (aria-hidden).
Reference
A normal-range band + a dashed target line.
Markers
End dot + min/max extrema.
Win Loss
Binary ± ticks, sign-coloured.
Installation
garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.
npx garn-ui add sparkline- Registry
sparkline- Source
- sparkline.tsx
- Deps
d3-shaped3-scale- Registry deps
utils
Import
import { Sparkline } from "@garn/ui/sparkline";Props
Generated from the component's TypeScript types.
curve- Description
- Smoothing for `line` / `area`.
- Type
"linear" | "monotone" | "natural"
dataRequired- Description
- The series, in order. Empty renders nothing; one point renders a dot.
- Type
number[]
fillOpacity- Description
- Fill alpha for the `area` variant.
- Type
number
height- Description
- No description.
- Type
number
referenceBand- Description
- A shaded "normal range" band behind the trend, in data units: `[low, high]`.
- Type
[number, number]
referenceLine- Description
- A dashed horizontal reference/threshold line, in data units (target, 0, …).
- Type
number
showEndDot- Description
- Mark the last (current) value with a solid dot.
- Type
boolean
showExtrema- Description
- Mark the min (faded) and max (solid) points with dots.
- Type
boolean
variant- Description
- `line` (default), filled `area`, discrete value `bar`s, or `winloss` — equal ± ticks from a centre line for binary outcomes (up/down days, wins/losses).
- Type
"area" | "bar" | "line" | "winloss"
width- Description
- viewBox coordinate space; the SVG scales to its CSS box (e.g. `w-full`).
- Type
number
Plus 484 inherited native <svg> attributes.
Styling
Target these data-slots and remap these tokens to restyle without forking the component.
[data-slot="sparkline"]Overview
Sparkline is the mini-viz of the chart group: a small, axis-less line, area, bar, or win/loss strip that shows shape and direction at a glance — trends in a table cell, a KPI tile, or a Stat. It reserves none of a full chart's chrome (no axes, legend, or tooltip); when you need those, reach for Chart. Because it's pure SVG with no hooks, it renders on the server and stays essentially free to drop in anywhere.
Guidelines
Show shape, not exact values. A sparkline conveys direction and volatility; pair it with a real number (a Stat value, a delta) when the precise figure matters — the spark alone isn't readable to the decimal.
Tone it with a token. Colour comes from currentColor, so set it with a text-* utility (text-chart-1, text-success). The winloss variant is the exception — it's sign-coloured with the positive/negative tokens, so its up/down meaning holds without relying on colour alone.
Label it honestly for assistive tech. Standalone, give it an aria-label. When it sits next to a value that already names it (Stat.Trend), mark it aria-hidden so screen readers aren't told the same thing twice.
Best practices
- Tone it with a
text-*token utility and give it an accessible label (oraria-hiddenwhen decorative). - Use
showEndDot/showExtremato mark the current value and the high/low.
- Don't expect exact values to be readable — a sparkline shows shape.
- Don't reach for it when the data needs axes or interaction — that's Chart.
Accessibility
- Role
img
- • role=img with an `aria-label` names the trend for a standalone spark.
- • Beside an already-labelled value (e.g. inside Stat.Trend) mark it `aria-hidden` — the value carries the meaning.
- • Colour is inherited via currentColor; winloss uses the positive/negative tokens, so its meaning survives without colour.
- Status
- Stable
- Version
v0.3.0- Introduced
v0.2.0
garn doesn't yet record a per-release version history. This reflects the component's current lifecycle state; full changelog entries will appear once the metadata pipeline emits a lifecycle.history field.