Chart card
Data displayDependency-free SVG bar/line charts wrapped in card chrome. Series colors map onto token variables so charts follow the theme automatically.
import { ChartCard } from "@componentforge/react";
Examples
Bar / line toggle
Weekly active users
Rolling 6 weeks
Props
Accessibility
- SVG carries role="img" with a generated aria-label summary (title, series, magnitude) — override with ariaSummary.
- Per-point <title> provides hover/focus tooltips natively.
- Loading/error/empty states reuse the shared States primitives.
Keyboard interactions
| Key | Action |
|---|---|
| Hover | Native tooltips per bar/point. |
API reference
Selected props — every component also spreads native HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "bar" | "line" | "bar" | Renderer. |
| series / labels | ChartSeries[] / string[] | — | values arrays share the label axis. |
| formatValue | (n: number) => string | String(n) | Tick + tooltip formatting. |
| loading / error / onRetry | — | — | State slots. |