Sparkline

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

Usage & Examples

Compact Trend

32
compact-trend.tsx
<Sparkline data={[12, 18, 14, 26, 24, 32]} showValue />

Visual variants

Themes

primary
32
secondary
32
tertiary
32
quaternary
32

States

success
32
warning
32
error
32
info
32
visual-variants.tsx
// Themes
<Sparkline theme="primary" data={[12, 18, 14, 26, 24, 32]} showValue />
<Sparkline theme="secondary" data={[12, 18, 14, 26, 24, 32]} showValue />
<Sparkline theme="tertiary" data={[12, 18, 14, 26, 24, 32]} showValue />
<Sparkline theme="quaternary" data={[12, 18, 14, 26, 24, 32]} showValue />

// States
<Sparkline state="success" data={[12, 18, 14, 26, 24, 32]} showValue />
<Sparkline state="warning" data={[12, 18, 14, 26, 24, 32]} showValue />
<Sparkline state="error" data={[12, 18, 14, 26, 24, 32]} showValue />
<Sparkline state="info" data={[12, 18, 14, 26, 24, 32]} showValue />

Interaction states

Loading
interaction-states.tsx
// Loading
<Sparkline loading data={[12, 18, 14, 26, 24, 32]} showValue />

Props API

17 props
Columns
Sparkline props API
Default
Description
aria-labelstringNoaria—Accessible label for the chart graphic.
classNamestringNostyling—Additional class name for the root.
colorstringNoprops"currentColor"Stroke color for the line.
dataChartDatum[] | number[]Yesprops—Numeric points or labelled values rendered as a compact line chart.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
heightnumberNoprops48Height of the SVG viewport.
labelReactNodeNoprops—Visible label rendered above the sparkline.
loadingbooleanNopropsfalseWhether the component should display a loading state.
paddingnumberNoprops4Inner SVG padding used when plotting points.
showAreabooleanNopropsfalseWhether to fill the area below the line.
showValuebooleanNopropsfalseWhether to render the last value next to the chart.
stateStateTypeNostyling—Visual state class used for styling.