Sparkline

The Sparkline component renders compact trend data for dashboards and dense metric surfaces.

Usage & Examples

compact-trend.tsx

<Sparkline data={[12, 18, 14, 26, 24, 32]} showValue />

Sparkline props API
				Default	Description
`aria-label`	`string`	No	aria	`—`	Accessible label for the chart graphic.
`className`	`string`	No	styling	`—`	Additional class name for the root.
`color`	`string`	No	props	`"currentColor"`	Stroke color for the line.
`data`	`ChartDatum[] \| number[]`	Yes	props	`—`	Numeric points or labelled values rendered as a compact line chart.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`height`	`number`	No	props	`48`	Height of the SVG viewport.
`label`	`ReactNode`	No	props	`—`	Visible label rendered above the sparkline.
`loading`	`boolean`	No	props	`false`	Whether the component should display a loading state.
`padding`	`number`	No	props	`4`	Inner SVG padding used when plotting points.
`showArea`	`boolean`	No	props	`false`	Whether to fill the area below the line.
`showValue`	`boolean`	No	props	`false`	Whether to render the last value next to the chart.
`state`	`StateType`	No	styling	`—`	Visual state class used for styling.