Sparkline

A compact trend line with a label, headline value and change, which draws in once on view and can be scrubbed point by point.

When to use

• Beside a KPI in a stat card, a table row or a list, where the shape of the trend matters more than exact values.
• When people may want to read individual points: pass labels and formatValue so scrubbing shows a dated, formatted value.
• Not for comparing discrete periods with axes; use BarChart. For several series or a readable value axis, use LineChart.

Usage

import { Sparkline } from "@/components/iris/sparkline/sparkline";

h(Sparkline, {
  label: "Storage used",
  value: "4.21 GiB",
  change: "+0.32 GiB",
  data: [3.89, 3.95, 3.99, 4.04, 4.09, 4.15, 4.21],
  labels: ["15 Oct", "16 Oct", "17 Oct", "18 Oct", "19 Oct", "20 Oct", "21 Oct"],
  formatValue: (v) => v.toFixed(2) + " GiB",
});

Props

Prop	Type	Default	Description
data	number[]	required	Ordered values, oldest first. A single value is drawn flat.
label	string	required	Names the measure; shown in the caption and used in the accessible name.
value	string	—	Headline at rest, already formatted. While scrubbing it is replaced by the scrubbed point.
change	string	—	Aside next to the headline at rest, such as +12%. Coloured by tone.
tone	"accent" | "success" | "warning" | "danger"	"accent"	Line, dot and change colour.
width / height	number	160 / 52	Aspect ratio of the plot. The plot fills its container's width and keeps this ratio.
labels	string[]	—	One label per point (such as a date); replaces the change while that point is scrubbed.
formatValue	(value, index) => string	grouped number	Formats a scrubbed point. Match it to the format of value.
area	boolean	true	Faint fill under the line.
interactive	boolean	true	Pointer and keyboard scrubbing. Turn off in dense lists to save tab stops.

Notes

• Keyboard: when interactive, the plot is a focusable role="slider". Arrow keys move one point, Page Up/Down about a sixth of the series, Home/End jump to the ends, Escape returns to the latest value. aria-valuetext reads the label (or position) and value.
• The SVG is hidden from assistive technology; the figure carries an aria-label built from label, value and change.
• Motion: the line draws in once when half visible, the end dot lands after, and new data morphs from the current shape. With reduced motion the finished line shows at once.
• Width follows the container; give the parent a width (the sparkline has no intrinsic width beyond width).
• Reads --accent, --accent-ink, --green, --orange, --red, --line, --line-strong, --ink and --ink-2.