Sparkline

Compact inline chart for embedding trends inside stat cards, table cells, and dashboards. No axes, no labels — just the shape of the data.

Examples

Revenue

$38.2k

+12%

data*

number[] | { value: number }[]

Values to plot. Accepts a plain number array or objects with a value key.

type= 'line'

'line' | 'bar'

Line or bar variant.

color= chart-1

string

Stroke/fill colour. Accepts any CSS colour string.

curveType= 'monotone'

'linear' | 'monotone' | 'step'

Interpolation style (line variant only).

referenceLine= —

number

Draw a dashed horizontal reference line at this value.

valueFormatter= —

(value: number) => string

Format the value shown in the hover tooltip.

height= 48

number

Height in px.

width= '100%'

number | string

Width in px or CSS string.

className= —

string

Extra class on the outer container.

Prop	Type	Default	Description
data*	number[] \| { value: number }[]	—	Values to plot. Accepts a plain number array or objects with a value key.
type	'line' \| 'bar'	'line'	Line or bar variant.
color	string	chart-1	Stroke/fill colour. Accepts any CSS colour string.
curveType	'linear' \| 'monotone' \| 'step'	'monotone'	Interpolation style (line variant only).
referenceLine	number	—	Draw a dashed horizontal reference line at this value.
valueFormatter	(value: number) => string	—	Format the value shown in the hover tooltip.
height	number	48	Height in px.
width	number \| string	'100%'	Width in px or CSS string.
className	string	—	Extra class on the outer container.