Chart Metric
Charts one measurement over time in a panel that frames itself.
/// APIResponse time
Variants
Supported configurations for this component.
Variants
2 examplesNeutral
/// APIResponse time
Tone from data
/// APIResponse time
LiveAdd to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | '/// Telemetry' | Card kicker label. |
| title | string | 'Metric' | Card title. |
| description | string | - | Optional description line. |
| data | object[] | - | Points of { [xKey], [dataKey] }. |
| dataKey | string | 'v' | - |
| xKey | string | 't' | - |
| unit | string | - | Shown muted after the tooltip value. |
| thresholds | {warning: number, fault: number} | - | Where this metric stops being healthy, in `dataKey` units. Supply it and the panel colours itself from the LATEST reading — the preferred form, since a chart that is TOLD its colour can contradict the series it draws. The order carries the direction: `{warning: 70, fault: 90}` is high-is-bad, `{warning: 30, fault: 15}` is low-is-bad. Boundaries are inclusive. |
| variant | 'neutral'|'accent'|'warning'|'fault' | 'accent' | Sets the badge tone, and decides whether the series reads as declared (the live stop) or as stated-by-nothing (`neutral`, the grey single-series ink every other chart uses). The manual fallback, for a metric with no meaningful threshold; `thresholds` wins. |
| badgeText | string|null | 'Live' | null hides the badge. |
| domain | [number|string, number|string] | ['dataMin - 1', 'dataMax + 1'] | recharts y-domain (fitted). |
| xInterval | number|'preserveStart'|'preserveEnd'|'preserveStartEnd' | 'preserveStartEnd' | Tick thinning. 'preserveStartEnd' (default) picks an index-even spread of ~7 labels that always includes the first and last reading. A number shows every nth label (recharts native); 'preserveStart'/'preserveEnd' also fall through to recharts native. |
| height | number|'fill' | 224 | Plot height; 'fill' grows into a flex parent. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
AI Canvas