Component

Sparkline

Draws a compact inline-SVG trend — a line or zero-anchored bars — with no charting dependency; tints follow the tone and color mode.

$pnpm dlx @stalk-ui/cli add @stalk-ui/sparkline

<Sparkline data={[4, 6, 5, 8, 7, 9, 6, 10, 12, 9, 13, 11]} aria-label="Revenue, last 12 weeks" />

<Sparkline
  data={[4, 6, 5, 8, 7, 9, 6, 10, 12, 9, 13, 11]}
  tone="success"
  area
  showLastPoint
  aria-label="Signups trend"
/>

<Sparkline
  variant="bars"
  data={[3, 5, 2, 8, 6, 9, 4, 7, 10, 6, 8, 12]}
  highlightLast
  aria-label="Deploys per day, last 12 days"
/>

Prop	Type	Required	Default	Description
`data`	`number[]`	Yes	-	Primary series of numbers, left → right. Needs at least two points to draw a line.
`variant`	`'line' \	'bars'`	No	-
`series`	`number[][]`	No	-	Additional series sharing the same x/y domain, drawn as muted lines. Line variant only.
`reference`	`number \	[number, number]`	No	-
`width`	`number`	No	-	Intrinsic width in px (the SVG still scales to its box). Default \`80\`.
`height`	`number`	No	-	Intrinsic height in px. Default \`24\`.
`tone`	`Tone`	No	-	Tone for the line / area / bars / point. Default \`accent\`.
`area`	`boolean`	No	-	Fill the area beneath the primary line. Line variant only.
`showLastPoint`	`boolean`	No	-	Mark the final data point of the primary series. Line variant only.
`strokeWidth`	`number`	No	-	Line thickness in px. Default \`1.5\`.
`gap`	`number`	No	-	Gap between bars in px. Bars variant only. Default \`1\`.
`radius`	`number`	No	-	Bar corner radius in px, clamped to half the bar width. Bars variant only. Default \`1\`.
`highlightLast`	`boolean`	No	-	Emphasize the final bar by fading the others. Bars variant only.
`'aria-label'`	`string`	No	-	Accessible label, e.g. "Revenue, last 30 days". When omitted the sparkline is<br />decorative (\`aria-hidden\`) — pair it with adjacent text in that case.

No recipe variants are documented for this component.

Install