kapable

Sparkline

Data display · 2 exports · v0.1.0 · showcase

Small server-rendered SVG trend shape with a required accessible label.

Browse 72 component families

Preview

Usage

<Sparkline values={perDay} label="Deploys per day, rising" tone="accent" />

Sparkline props
prop	type	notes
values	number[]	The series, oldest first. One value draws just the "now" dot.
label	string	Accessible summary — say what the trend MEANS, not the numbers ("Deploys per day over two weeks, rising").
tone?	SparklineTone	Line hue; the app judges tone (default 'neutral').
fill?	boolean	Translucent area fill under the line (default false — lines, not fills).
width?	number	Rendered size in px (defaults 96×28 — a word, not a figure).
height?	number
mix?	MixInput