Data Display
Sparkline
Tiny inline line/area chart for a single number series; pure SVG, no chart library.
A tiny inline line (or area) chart for a single series of numbers — request throughput, GPU utilization, latency over a rolling window. Pure SVG, no chart library. It scales the data to fit and stretches to its container width, so it drops naturally into a stat card or a table cell. tone picks the stroke color from the design tokens; color overrides it.
Import
tsx
1import { Sparkline } from "@yuhuanowo/yunui";Basic
Line
Area fill
Set area for a vertical gradient of the stroke color under the line.
Area
Tones
tone maps to the semantic color roles (accent, success, warning, error, info, neutral).
Tones
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| area | boolean | false | Fill the area under the line with a vertical gradient of the stroke color. |
| className | string | — | |
| color | string | — | Explicit CSS color for the stroke (and area fill), overriding `tone`. |
| data* | number[] | — | The series to plot, oldest → newest. Fewer than 2 points renders nothing. |
| height | number | 28 | Intrinsic viewBox height. |
| label | string | — | Accessible name for the whole graphic, e.g. "Storage used: 62%". Without it the element is treated as decoration rather than being announced as an anonymous image — an unnamed `role="img"` tells a screen reader there is a picture here and nothing about it. |
| max | number | — | Upper bound of the value axis. Defaults to the data maximum. |
| min | number | — | Lower bound of the value axis. Defaults to the data minimum. |
| strokeWidth | number | 1.5 | Stroke width in viewBox units. |
| tone | "accent" | "success" | "warning" | "error" | "info" | "neutral" | accent | Semantic stroke color. Ignored when `color` is set. |
| width | number | 100 | Intrinsic viewBox width; the SVG still scales to its container. |