Chart Card
Chart Card
The "headline number above a chart" pattern used across admin dashboards — boxed icon + label, a large bold figure, a trend badge, a caption, then any chart underneath. Pairs with the chart family or Sparkline as the children.
import { ChartCard } from "@pompeitech/vesuvius-ui";Default
Total Revenue
$276,000.00+12%vs last month
Total Revenue (Last 6 Months)
API
ChartCard
| Prop | Type | Default | Description |
|---|---|---|---|
icon | LucideIcon | Optional boxed icon next to the label. | |
label | string | ||
value | ReactNode | The headline figure. | |
changePct | number | Renders a trend badge — green+up for positive, red+down for negative. | |
changeLabel | string | Text after the percentage, e.g. "vs last month". | |
caption | ReactNode | Small muted line under the value. | |
action | ReactNode | Top-right slot — a legend, a period switcher. | |
children | ReactNode | The chart itself — any chart component (Sparkline, Charts) sized to fill its container. |
Plus every native <div> prop on the root.