Sparkline

A sparkline is a chart with everything but the shape taken away — no axes, no ticks, no grid — small enough to sit in a table cell beside the number it qualifies. variant="sparkline" is that treatment in one prop: it takes both guides off and brings the height down to 40px.

What the variant strips

The variant strips the chart, not the marks, so swapping the line for a bar or an area gives a sparkline of that shape. Nothing about how the marks are drawn or positioned changes — the same values land in the same places as they would on a chart with axes, and mark options like curve apply exactly as they do anywhere else.

What it has nothing to strip from is a sankey, which draws no axes or grid to begin with. The compact height still applies, but that is all the variant does there — a flow needs room to be read.

Overriding the defaults

Everything it decides is a default, so any of it can be said again. height and width override the compact size, and either guide can be asked for by name where the shape alone isn't enough to read:

<Chart ariaLabel="Opens per day" marks={marks} variant="sparkline" yAxis={{ isHidden: false }} />

withFocus={false} is worth pairing with it. It makes the chart a picture: no dot on the nearest point, no keyboard cursor, no tooltip, and the chart leaves the tab order. Reach for it when the chart is too small to interrogate and its numbers are already readable beside it — a column of eighty charts should not be eighty tab stops. It is left on by default, because a sparkline with room around it is still worth hovering.