Sparkline

Chart
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.
src/charts/sparkline
View in Charts

Playground

Every control sets a real prop of SparklineProps. The JSX below updates as you go.
Props
Tone
pick one
Height
pick one
line
boolean
track
boolean
JSX · SparklineProps
<Sparkline primary />

Variants

4 examples from src/charts/sparkline/sparkline.md, each rendered live from its own JSX.
Tones
<Container xxxs>
<Column>
<Sparkline primary values={[4, 8, 6, 12, 10, 16, 14, 18, 16, 20, 24]} />
<Sparkline success values={[4, 8, 6, 12, 10, 16, 14, 18, 16, 20, 24]} />
<Sparkline destructive values={[24, 20, 16, 18, 14, 16, 10, 12, 6, 8, 4]} />
<Sparkline muted values={[4, 8, 6, 12, 10, 16, 14, 18, 16, 20, 24]} />
</Column>
</Container>
Sizes
<Container xxxs>
<Column>
<Sparkline compact values={[4, 8, 6, 12, 10, 16, 14, 18, 16, 20, 24]} />
<Sparkline values={[4, 8, 6, 12, 10, 16, 14, 18, 16, 20, 24]} />
<Sparkline tall values={[4, 8, 6, 12, 10, 16, 14, 18, 16, 20, 24]} />
</Column>
</Container>
Line
<Container xxxs>
<Sparkline line values={[4, 8, 6, 12, 10, 16, 14, 18, 16, 20, 24]} />
</Container>
Track
track paints the plot area with the muted track, so the strip keeps a visible frame. A flat or all-zero series then 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 holds the same band whatever its data. Use it where strips sit side by side; a lone sparkline inside running text is usually better without.
<Container xxxs>
<Sparkline track values={[0, 0, 0, 0, 0, 0, 0, 0]} />
</Container>

Anatomy

1
Line
2
Fill
3
End marker
Dimmed parts appear only in some states or variants.

Props

12 props on SparklineProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
1 prop
values *
number[]
–
The series to plot; each value becomes one bar, sized against the max.
Tone
pick one
4 props
primary
boolean
false
success
boolean
false
destructive
boolean
false
muted
boolean
false
Height
pick one
7 props
compact
boolean
false
tall
boolean
false
line
boolean
false
A continuous 2px trend line with an area wash and end marker, instead of the bar strip.
track
boolean
false
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
img
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Container xxxs>
<Sparkline values={[4, 8, 6, 12, 10, 16, 14, 18, 16, 20, 24]} />
</Container>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--f-dp
--fd
--ft

Related components