Motion UIComponentsComponent

Sparkline

A path-drawn micro-chart that draws in on reveal and updates live as values change.

npx shadcn@latest add @motion/sparkline
MotionScore

API reference

Components

<Sparkline />

The line + area micro-chart. Renders only the <svg>; compose a caption or delta beside it in your own markup (that copy is content, not part of the mechanic). Every mark is compositor- or paint-friendly: the draw-in is a one-shot pathLength, the dot pulse is a scale transform, and live data morphs the line, area, and endpoint together between ticks.

history?

number[]

Data mode: a window of readings mapped to the curve via buildSparkPath. Re-render with a fresh array to morph the line, area, and endpoint to the next state. Takes precedence over path.

path?

string

Literal mode: a hand-drawn SVG path d string, used verbatim as the line (and closed to the baseline for the area). Ignored when history is given.

width?

number = DEFAULT_WIDTH

viewBox width. Also the baseline width the area closes across and the default endpoint-dot x in literal mode. Default 280.

height?

number = DEFAULT_HEIGHT

viewBox height. Also the baseline the area closes down to. Default 64.

padY?

number = DEFAULT_PAD_Y

Vertical inset for history mapping (see SparkPathOptions.padY). Default 10.

tone?

SparklineTone = "primary"

Line/area colour tier (see SparklineTone). Default "primary".

area?

boolean = false

Render the area fill under the line (gradient for primary, flat for neutral). Default false.

grid?

number[]

Faint horizontal gridline y-positions, in viewBox coordinates. Omit for no grid.

dot?

boolean = false

Render the accent endpoint dot. In data mode it sits on the last reading; in literal mode pass dotX/dotY. Default false.

dotX?

number

Endpoint-dot x in literal mode (data mode uses the last point). Defaults to width.

dotY?

number

Endpoint-dot y in literal mode (data mode uses the last point). Defaults to 0.

dotRadius?

number = 3.5

Endpoint-dot radius. Default 3.5.

draw?

boolean = false

Draw the line in once via a pathLength reveal (paint-tier, one-shot). Default false renders the line already drawn.

revealed?

boolean = true

Gate for the draw reveal: the line holds at pathLength 0 until this is true, then draws once - so a consumer can wait for a panel entrance. Default true.

tickKey?

number

Bump this on every live tick to pulse the endpoint dot (a compositor scale keyframe). Omit for a static dot. Requires dot and motion.

strokeWidth?

number = 2

Line stroke width, in viewBox units. Default 2.

nonScalingStroke?

boolean = false

Keep the stroke a constant screen width regardless of any transform scaling the chart (crisp under a zoom). Default false.

motionAllowed?

boolean

Reduced-motion gate. When omitted, derived from the theme + the user's prefers-reduced-motion - pass a section's own gate to keep the whole panel in step.

label?

string

An accessible label. When set the chart is exposed as role="img" with this label; omitted, it is aria-hidden decoration (the default, since a consumer's caption usually carries the meaning).

className?

string

Merged onto the <svg>. Size the chart here (e.g. h-24 w-full).

Functions

buildSparkPath

Maps a numeric history window to sparkline geometry: each reading becomes an evenly-spaced point, min/max-normalised into the padded viewBox, then joined into a line d and a baseline-closed area d. Pure geometry (no React, no timing), exported so a consumer can feed their own history and drive a Sparkline - or draw the shapes themselves.

buildSparkPath(history: number[], options: SparkPathOptions = {}): SparkGeometry

Returns

d

string

The M ... L ... line path across every reading.

areaD

string

d closed down to the baseline and back - the fillable area path.

points

{ x: number; y: number }[]

Every reading mapped to a viewBox point.

first?

{ x: number; y: number }

The first (left-most) point, omitted for an empty history.

last?

{ x: number; y: number }

The last (right-most) point, omitted for an empty history.

buildSparkAnimation

Motion targets for a data-driven state change. Keeping the line, area, and endpoint in one geometry-derived object ensures all three marks animate to the same reading window rather than updating on separate paths.

buildSparkAnimation(geometry: SparkGeometry): void

d

string

The M ... L ... line path across every reading.

areaD

string

d closed down to the baseline and back - the fillable area path.

points

{ x: number; y: number }[]

Every reading mapped to a viewBox point.

first?

{ x: number; y: number }

The first (left-most) point, omitted for an empty history.

last?

{ x: number; y: number }

The last (right-most) point, omitted for an empty history.

Featured in

See the sparkline composed into full sections.

Stats: Live engagement panelAn example of a live engagement dashboard panel with a ticking events-per-minute counter, a trend delta and a path-drawn sparkline in Motion for React.