data/@mihcm/ui·v0.21.0·stable
SparkChart
Small D3-backed trend chart for dense KPI rows, table cells, and dashboard cards.
Props
The full prop API for SparkChart. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
data | number[] | — | Numeric series used to generate the line. | 0.12.0 |
width / height | number | 160 / 48 | SVG dimensions. | 0.12.0 |
tone | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'primary' | Semantic line tone. | 0.12.0 |
lineTone | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | — | Explicit line tone override. Falls back to `tone`. | 0.12.2 |
areaTone | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'primary' | Semantic filled area tone. | 0.12.2 |
dotTone | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'primary' | Semantic dot stroke tone. | 0.12.2 |
showArea | boolean | false | Render a subtle filled area below the line. | 0.12.0 |
showDots | boolean | false | Render a dot for each data point. | 0.12.0 |
label | string | 'Trend' | Accessible image label. | 0.12.0 |
areaClassName / lineClassName / dotClassName | string | — | Tokenized Tailwind overrides for the area, line, and dots. | 0.12.2 |
className | string | — | Additional Tailwind classes on the root wrapper. | 0.12.0 |
Upstream library
This component intentionally keeps the MiHCM API small while preserving the supported upstream behavior listed below. Use these links when you need the full underlying option surface.
- D3 shape documentation — SparkChart uses D3 line/area generation under a compact MiHCM tokenized SVG wrapper.
- D3 scale documentation — Use upstream docs when adapting scale domains, ranges, or data normalization before passing values to SparkChart.
Import
import { SparkChart } from '@mihcm/ui/SparkChart';