/// Charts
Sparkline
A tiny inline-SVG trend line — currentColor stroke, optional area wash and an accent signal dot.
import { Sparkline } from "@protocore/pds";Basics
Pass an array of numbers, oldest → newest. The line scales to its own min/max and inherits currentColor, so it takes the ink of whatever text it sits beside. Fewer than two points renders nothing.
Area and signal
area fills beneath the line with a faint currentColor wash; signal marks the final point with a square dot in --pds-accent — the one place the brand accent is allowed on a chart, to pull the eye to the latest reading.
Inline in a row
Sparklines earn their keep next to a label and a number — a trend you can read at a glance without axes, gridlines, or a tooltip. Size them down (width / height) to sit on a single text line.
eu-central-1
98%
us-east-1
68%
ap-south-1
74%
When to use it
Reach for Sparkline when the *shape* of a trend matters but the exact values do not — a KPI tile, a table cell, a status row. It is deliberately axis-free and label-free.
When a reader needs to compare values, read a scale, or hover for a datum, graduate to a full chart: LineChart or AreaChart for a time series, BarChart for categories. Sparkline ships in the main `@protocore/pds` entry and is fully server-safe — no recharts, no client boundary — so it is cheap to scatter across a dashboard.
Usage
Do
- Pair a sparkline with the current value as text — the trend shape plus one number.
- Use `signal` to highlight the latest point on a live-updating metric.
- Set `ariaLabel` describing the trend ("uptime rising, now 98%") when the sparkline conveys standalone meaning.
- Let it inherit `currentColor` so it matches its surrounding text tone.
Don't
- Don't use it when readers must read precise values — use a full chart with axes.
- Don't plot more than one series in a sparkline; it has no legend.
- Don't color it with a status hue to encode good/bad — that's a Badge or MetricDelta's job.
- Don't feed it a single point or an empty array expecting a baseline — it renders nothing.
Accessibility
- With `ariaLabel` set, the SVG is exposed as `role="img"` with that label; describe the trend, not the raw numbers.
- Without `ariaLabel` the SVG is `aria-hidden` — correct when the adjacent text already conveys the value and the sparkline is purely decorative.
- The line does not rely on color alone: it is a visible stroke shape, and the optional signal dot is a distinct square mark, not just a hue.
Sparkline props
| Prop | Type | Default | Description |
|---|---|---|---|
area | boolean | false | Fill the area beneath the line with a faint `currentColor` wash. |
ariaLabel | string | — | Accessible label. When set the SVG is exposed as `role="img"`; otherwise it is hidden. |
className | string | — | |
data * | number[] | — | Sample values, oldest → newest. Fewer than two points renders nothing. |
height | number | 32 | Intrinsic SVG height in px. Defaults to `32`. |
signal | boolean | false | Mark the final point with a small square dot in `--pds-accent` (the signal rule). |
style | CSSProperties | — | |
width | number | 120 | Intrinsic SVG width in px. Defaults to `120`. |