Motion UIComponentsComponent

Sparkline

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

API reference

Components

`<Sparkline />`

Line and area micro-chart with optional draw-in and live morphing.

`history?`

number[]

Data mode: a window of readings mapped to the curve.

`path?`

string

Literal mode: a hand-drawn SVG path d string.

`width?`

number = DEFAULT_WIDTH

viewBox width. Default 280.

`height?`

number = DEFAULT_HEIGHT

viewBox height. Default 64.

`padY?`

number = DEFAULT_PAD_Y

Vertical inset for history mapping. Default 10.

`tone?`

SparklineTone = "primary"

Line/area colour tier. Default "primary".

`area?`

boolean = false

Render the area fill under the line. Default false.

`grid?`

number[]

Faint horizontal gridline y-positions in viewBox coordinates.

`dot?`

boolean = false

Render the accent endpoint dot. Default false.

`dotX?`

number

Endpoint-dot x in literal mode. Defaults to width.

`dotY?`

number

Endpoint-dot y in literal mode. 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. Default false.

`revealed?`

boolean = true

Gate for the draw reveal. Default true.

`tickKey?`

number

Bump this on every live tick to pulse the endpoint dot.

`strokeWidth?`

number = 2

Line stroke width, in viewBox units. Default 2.

`nonScalingStroke?`

boolean = false

Keep the stroke a constant screen width regardless of transform scaling.

`motionAllowed?`

boolean

Reduced-motion gate. Derived from the theme when omitted.

`label?`

string

Accessible label. Exposes role="img" when set.

`className?`

string

Merged onto the <svg>.

Functions

`buildSparkPath`

Maps a numeric history window to sparkline geometry.

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.

`points`

{ x: number; y: number }[]

Every reading mapped to a viewBox point.

`first?`

{ x: number; y: number }

The first (left-most) point.

`last?`

{ x: number; y: number }

The last (right-most) point.

`buildSparkAnimation`

Motion targets for a data-driven state change.

buildSparkAnimation(geometry: SparkGeometry): void

`d`

string

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

`areaD`

string

d closed down to the baseline and back.

`points`

{ x: number; y: number }[]

Every reading mapped to a viewBox point.

`first?`

{ x: number; y: number }

The first (left-most) point.

`last?`

{ x: number; y: number }

The last (right-most) point.

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.