Sparkline
A word-sized trend with no axes. Signups below are honest sample data, rendered as a static SVG.
Signups trend
<Sparkline data={signups} />Sized
Pass width, height, and strokeWidth to fit the line to its slot.
<Sparkline label="Weekly commits" data={weekly} width={160} height={40} strokeWidth={2} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | - | Points in order, left to right. |
width | number | 120 | viewBox width; the SVG scales to 100%. |
height | number | 32 | viewBox height. |
label | string | "Sparkline" | Chart name; opens the auto-summary. |
strokeWidth | number | 1.5 | Line weight. |
class | string | - | Style passthrough. |
Static honesty
Static SVG polyline, no axes, dots, or hover states. Fewer than two points draws a flat mid line and the label notes the point count.
Accessibility
- The chart is an image (
role="img") with an auto-summary label:"{Label}, ends at {last}, high {max}". - A
<title>repeats the summary and a<desc>describes the reading order.