Sparkline

Stable

A tiny trend line that highlights the latest value and can be read aloud.

Also known as mini chart, trend line

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

<Sparkline label="Slowest orders" unit=" min" data={[2050, 2100, 2200, 2180, 2300, 2250, 2310]} />
<Sparkline label="Slowest orders" unit=" min" showMinMax width={160} height={36} data={[2050, 2100, 2200, 2180, 2300, 2250, 2310]} />

The latest point has the main chart color. The line stays grey so the latest value stands out.

Usage Code Design Accessibility

When to use it

A tiny trend line with the latest value marked, for places with no room for a full chart. It has no axes or labels, so it always sits beside a number.

Made of: Trend line · Lowest and highest dots · Latest point

Use it for

Beside a headline number, inside a StatTile.
A table cell or list row that shows a trend.
The fallback in a ChartFrame that is too narrow for the full chart.

Not for

A trend people need to read exact values from: use LineChart.
The only place the numbers appear: use DataTable.

Do and avoid

Orders this week

18.4K

Do. A tiny trend beside its number shows the shape at a glance.

Avoid. A lone line with no number gives nothing exact to read.

Do

Put it beside a number that gives the current value.
Cover the same time as the number beside it.
Use it in place of a chart that is too narrow to draw.

Avoid

Don't add axes, grid lines or labels. Use a LineChart for that.
Don't let a screen reader read it inside a tile. It would repeat the tile.
Don't compare trend lines as if they share a scale when they do not.

On a phone

It is a fixed-size picture, 96 by 28px unless you pass width and height, so it does not resize with its container.
It has no hover or tap behaviour, so put the numbers next to it in text.
Set width yourself if you need it larger on a phone.

Seen in products

PatternFly ships a sparkline alongside area, bar, line, pie and bullet charts, reported in the Supernova roundup.

Supernova, data visualization in 11 design systems (opens in a new tab)

Properties

Prop	Type	Default	Description
datarequired	number[]	none	Values in time order.
labelrequired	string	none	What the line measures. Used in the accessible name.
unit	string	""	Unit appended to values in the accessible name. Include a leading space if needed.
formatValue	(n: number) => string	formatNumber	Formats values in the accessible name.
width	number	96	Width in px.
height	number	28	Height in px.
showMinMax	boolean	none	Marks the minimum and maximum with hollow dots.
decorative	boolean	none	Hides the sparkline from assistive technology. Use when a visible number carries the same information.
color	string	"var(--chart-1)"	Color of the emphasized end point.
className	string	none	Extra classes on the svg.

"Show code under the preview gives the code for the example on the stage."

In Figma

In Figma, one Sparkline switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.

Sparkline in Figma: each property and the React prop it sets
Figma property	React	Values
Show min max	`showMinMax`	On or off

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

empty: With an empty data array, nothing is drawn.
single point: With one value, only the end dot is drawn and no line.
min and max: Pass showMinMax to mark the lowest and highest points with small rings.
decorative: Pass decorative to hide it from screen readers when the number beside it already says the same thing.

Tokens

Change one of these and every part that uses it follows.

--chart-axis
--chart-1
--surface

Plain, and with lowest and highest points