Sparkline Stats
.mdKPI cards with rolling numbers, an up/down delta badge and a sparkline that draws in, with a crosshair on hover or arrow keys.
chartkpistatssparklinedashboardmetrics
Installation
$npx shadcn@latest add @geturui/sparkline-stats
Also installs: Odometer Number
Usage
usage.tsx
1import { SparklineStats } from "@/components/charts/sparkline-stats";
2
3<SparklineStats
4 stats={[
5 { label: "Revenue", value: 48210, prefix: "$", delta: 12.4, data: [31, 33, 32, 36, 38, 41] },
6 { label: "Churn", value: 2.4, suffix: "%", decimals: 1, delta: -0.6, invert: true, data: [3.1, 2.9, 2.8, 2.6, 2.4] },
7 ]}
8/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
stats* | StatItem[] | — | { label, value, delta, data, prefix?, suffix?, decimals?, invert?, labels?, caption? }. |
StatItem.delta | number | — | Percent change; positive shows “Up”, negative “Down”. |
StatItem.invert | boolean | — | Lower is better — a drop is shown as good. |
Sparkline | component | — | Also exported on its own: data, labels, color, formatValue, label. |
Accessibility
- Deltas pair an icon with the words Up/Down, not colour alone.
- Sparklines are focusable images with a summary label; Left/Right/Home/End move the crosshair and the value is announced.
- Numbers roll once when scrolled into view and expose the final value to screen readers.