Charts
Stat card & sparkline
A metric that counts up on a spring, a signed delta with an arrow (never color alone) and a sparkline of the recent trend.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { StatCard, Sparkline } from '@vizzele/react';
<StatCard
label="Revenue"
value={48210}
prefix="$"
delta={12.4}
deltaLabel="vs last month"
trend={[31, 34, 33, 38, 41, 40, 46, 48]}
/>
// p95 latency: going down is good
<StatCard label="p95 latency" value={182} suffix=" ms" delta={-8} upIsGood={false} />
<Sparkline data={[3, 5, 4, 8, 7, 9]} label="Sessions, last 6 days" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Sentence case, no trailing colon. |
value | number | ReactNode | — | Numbers count up on a spring. |
prefix / suffix | string | — | Units around the value. |
delta | number | — | Change in percent. |
upIsGood | boolean | true | Flip for latency, churn… |
trend | number[] | — | Recent values for the sparkline. |
Accessibility
- The delta carries an arrow and a sign, so its direction never depends on color.
- Sparklines are role="img" with a description of the trend.