Sparkline
Compact inline sparkline for embedding trend data in dashboards or KPI cards.
Category: chart · WCAG 2.1-AA · chart, sparkline, inline, trend, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | — | Array of numeric values |
label | string | — | Accessible name for the chart (invisible — rendered as the SVG `<title>`). |
ariaLabel | string | — | Alias for `label` (the catalog convention for an invisible accessible name). Both work; pass exactly one. |
width | number | 80 | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 32 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
color | string | — | Stroke color (CSS value) |
endDot | boolean | — | Show dot at last data point |
Design tokens
--cascivo-chart-1
When to use
- Embedding a compact micro-trend inline in text, tables, or KPI cards
- Conveying direction at a glance where a full chart would be too large
When not to use
- Reading precise values or axes are needed — use LineChart
- As a standalone primary chart with its own panel
Examples
Inline sparkline
import { Sparkline } from '@cascivo/charts'
<Sparkline data={[10, 20, 15, 30, 25]} label="Trend" endDot />