Sparkline

A word-sized trend with no axes and no labels — a line, an area or a run of bars that says which way a number has been going.

tsx

1import { Sparkline } from "@pestoui/core"

Line, area and bar

The same series three ways. The tone is the only colour decision; the stroke keeps its weight however the box is stretched.

Beside a figure

Next to a visible number the spark is a second telling of the same fact, so leave srLabel off and it stays silent to screen readers. width and height set the box in px.

Runs this week

1,717

Props

Prop	Type	Default	Description
data	number[]	—	Required. The series, oldest reading first.
variant	"line" \| "area" \| "bar"	"line"	A stroke, a filled area, or one bar per reading.
tone	"selected" \| "success" \| "warning" \| "destructive" \| "info" \| "muted" \| "chart-1" … "chart-5"	"selected"	The stroke or fill colour.
width / height	number	96 / 32	The box in px. style is spread last, so a caller can override either.
strokeWidth	number	2	Screen px, held at that weight however the box stretches.
srLabel	string	—	Announced in place of the graphic. Pass it only when the spark is the sole representation of the data.

PreviousSocial Button Next Spinner

Pesto UI · 117 documented components