Component

Sparkline

Draws a compact inline-SVG trend line 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"
/>

Prop	Type	Required	Default	Description
`data`	`number[]`	Yes	-	Primary series of numbers, left → right. Needs at least two points to draw a line.
`series`	`number[][]`	No	-	Additional series sharing the same x/y domain, drawn as muted lines.
`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 / point. Default \`accent\`.
`area`	`boolean`	No	-	Fill the area beneath the primary line.
`showLastPoint`	`boolean`	No	-	Mark the final data point of the primary series.
`strokeWidth`	`number`	No	-	Line thickness in px. Default \`1.5\`.
`'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