Widgets
Chart card
A titled card wrapping a chart, with a headline value and trend above it.
Not documented yet
This component ships in the design system and is fully supported. What is missing is the guidance around it: when to reach for it, the do and don't, and the accessibility notes. Until that is written, Storybook is the reference for variants, props and live controls.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | — | Card heading, e.g. "Claims volume (7 days)". |
value | React.ReactNode | — | Optional headline metric shown under the title. |
trend | { value: string; direction: "up" | "down"; good?: boolean; } | undefined | — | Optional trend pill. `direction` sets the arrow; colour follows `good` (defaults to `true` when the direction is `up`). |
datarequired | Record<string, string | number>[] | — | Chart series data — one object per point. |
dataKeyrequired | string | — | Key in each datum holding the numeric series value (the area). |
xKeyrequired | string | — | Key in each datum holding the x-axis category label. |
configrequired | ChartConfig | — | Recharts/shadcn chart config keyed by series — supplies label and colour. |
className | string | undefined | — | — |