Sparkline
Tiny inline trend line matching the SVG spark polyline inside KPI cards.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
values | number[] | — | Data points for the spark line. |
width | number | 72 | SVG width in pixels. |
height | number | 22 | SVG height in pixels. |
color | string | "var(--m-color-primary)" | Line stroke color. |
strokeWidth | number | 1.25 | Line stroke width. |
Sparkline extends SVGAttributes<SVGSVGElement>. Returns null when values is empty.
Examples
Different colors
Different widths
import { Sparkline } from "@solarius/onset";
<Sparkline values={[5, 10, 8, 15, 12]} />
<Sparkline values={data} color="var(--m-color-ok)" width={120} strokeWidth={2} />