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 | 120 | SVG width in px. **This chart is fixed-width by default** — it is a compact, inline chart meant to sit in a table cell or beside a label, so omitting `width` gives you 120px rather than a container-filling chart. Pass a number to change it. The catalogue-wide "omit for a responsive chart" note does not apply to this chart. |
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 | 'var(--cascivo-chart-1)' | Stroke color (CSS value) |
endDot | boolean | true | 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 />