Sparkline

A compact trend strip: a row of thin bars whose heights track a series of values, with the series in a soft wash of the tone and the latest bar in the full accent. Pass values and it sizes each bar against the series max and paints the tone, so no call site hand-composes a row of flexGrow + height + backgroundColor Views to draw an inline trend on a stat card or dashboard.
iOS
Android
Web
tsx
<Container xxxs>
<Sparkline values={[4, 8, 6, 12, 10, 16, 14, 18, 16, 20, 24]} />
</Container>

Props

Prop
Description
values
required
number[]
The series to plot; each value becomes one bar, sized against the max.
primary
boolean
Tone (pick one; default `primary`). Colors the marks.
success
boolean
Tone (pick one; default `primary`). Colors the marks.
destructive
boolean
Tone (pick one; default `primary`). Colors the marks.
muted
boolean
Tone (pick one; default `primary`). Colors the marks.
compact
boolean
Height (pick one; default medium).
tall
boolean
Height (pick one; default medium).
line
boolean
A continuous 2px trend line with an area wash and end marker, instead of the bar strip.
track
boolean
Paint the plot area with the muted track, giving the strip a visible frame. Two things it buys: a flat or all-zero series reads as a chart sitting at zero rather than as one that failed to load, and a row of strips scans evenly because every one of them holds the same band whatever its data. Use it wherever strips sit side by side (a Stats row); a lone sparkline inside running text is usually better without.
accessibilityLabel
string
Accessible summary (e.g. "requests, last 11 days").
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
For sizing/composition only (e.g. maxWidth); not a styling escape hatch.

Do & Don’t

Pair with a value

Don’t
Draw a bare trend strip with no current value; the reader has to decode the slope.
Do
Requests
24.5k
+8.2%
Anchor the sparkline to an explicit headline value and delta with the Stats molecule, which owns the metric-card anatomy and renders the trend strip from its spark field.
← ServiceHealthList
StackedBar →