Sparkline

@summonware/ui · sparkline · P2 · Data visualisation

Usage

A tiny inline trend line — no axes, tooltip or legend, the "how is this moving" glance that sits next to a number, not a chart in its own right. Shares `Chart`'s brand-token colour palette (Recharts underneath) so a sparkline and a full chart on the same page always agree on what "primary" or "success" looks like.
import { Sparkline } from '@summonware/ui';

Best practices

DoPair it with the actual number (inside a `StatWidget`, next to a table cell) — a sparkline with no adjacent value only shows direction, never magnitude.
Don'tAdd a tooltip or axis "to make it more useful." At that point it is a small `Chart`, not a sparkline — use `Chart` instead.

Examples

Common configurations, variations and states.

Next to a metric

Revenue

$48,290

▲ 12.4%
The common placement — inside a stat tile, not standalone.

Reference variants

2 of 9 labels from the reference are demonstrated above.
Sparkline LineLineSparkline BarSparkline AreaSparkline PieSparkline DonutSparkline Radial BarBarArea