Metric Chart
Self-framed single-series telemetry panel: corner brackets, kicker and title header, and a status badge around one fitted-domain area chart. The fitted y-domain keeps non-zero-floor readings like altitude or latency filling the plot instead of flattening into a sliver.
/// StationOrbital Altitude
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/andromeda-metric-chart2
For dark mode, add the dark class to your <html> element:
<html class="dark">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. |
| variant | 'accent'|'warning'|'fault' | 'accent' | Badge only — chart ink stays neutral. |
| badgeText | string|null | 'Live' | null hides the badge. |
| domain | Array | ['dataMin - 1', 'dataMax + 1'] | recharts y-domain (fitted). |
| xInterval | number | 3 | - |
| 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