Primitive

Sparkline

Tiny trend primitive rendered as line or bar SVG.

Sparklines show trend shape, not detailed analysis. Keep axes and legends in the surrounding data surface.
data
DOM renderImage render
SparklineDefault
SparklineSparklineSparkline

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Compact generated trend variants.
SparklineSparklineSparkline
Render state

Line

Line trend.
SparklineSparkline
Render state

Area

Line with soft area and endpoint.
SparklineSparklineSparkline
Render state

Bar

Bar density.
SparklineSparkline
Render state

Dot

Dot distribution.
SparklineSparkline
Render state

Signals

Sparkline intent variants for data cards.
SparklineSparklineSparklineSparkline
Render state

Volatile

High variance trend.
Sparkline
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
values *readonly number[]-Series values normalized into the SVG viewport.
display'line' | 'bar' | 'dot'lineSparkline mark type.
intent'sky' | 'neutral' | 'terminal' | 'error'skyLine, endpoint, area, and bar color.
areabooleanfalseAdds a soft area fill under a line sparkline.
showEndpointbooleantrueShows the last value dot for line sparklines.