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- Deps
d3-shaped3-scale- Registry deps
utils
Import
import { Sparkline } from "@garn/ui/sparkline";Props
The component's public props and their types.
curve- Description
- Smoothing for `line` / `area`.
- Type
"linear" | "monotone" | "natural"- Default
"monotone"
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- Default
0.15
height- Description
- viewBox height; the SVG scales to its CSS box.
- Type
number- Default
32
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- Default
false
showExtrema- Description
- Mark the min (faded) and max (solid) points with dots.
- Type
boolean- Default
false
variant- Description
- `line`, 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"- Default
"line"
width- Description
- viewBox width; the SVG scales to its CSS box (e.g. `w-full`).
- Type
number- Default
100
Plus 484 inherited native <svg> attributes.
Styling
Target these data-slots and states, and remap these tokens, to restyle without forking the component.
[data-slot="sparkline"]When to use
Show a trend inline — in a Stat tile, a table row, or beside a KPI — where a full chart's axes and legend would be overkill.
Reach for something else when
- You need axes, a tooltip, a legend, or precise reads (use Chart)
- a single value vs a target (use Gauge or Bullet).
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.
Troubleshooting
Empty output.
Cause. data is empty — a sparkline needs points.
Fix. Pass a non-empty number[]; a single value renders a dot.
Screen readers announce the spark twice next to a Stat.
Cause. Both the Stat value and the spark carry a name.
Fix. Mark a decorative spark aria-hidden.
Setting text-* didn't recolour the winloss bars.
Cause. winloss is sign-coloured with the positive/negative tokens by design.
Fix. That's intended — winloss ignores the inherited colour so up/down reads without colour alone.
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.