Tiny SVG trend line with missing-value handling, area or line modes, and accessible summaries.
LineAreaPositiveNegativeMissing
Area · positive
Line · negative
<Sparkline data={[12, 14, null, 18, 17]} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Sparkline } from '@chanrg/4ui';<Sparkline data={[12, 14, null, 18, 17]} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array<number | null> | [] | Normalized trend values. |
variant | line | area | area | Fill treatment. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- The SVG exposes minimum and maximum values in its accessible name.