Components › Charts
Chart card
The shell every chart card shares: title, number and change, the chart on a white panel, a footer.
Installation
npx plankui@latest add chart-cardUsage
import { ChartCard } from "@/components/ui/chart-card";
<ChartCard title="Active users" value="12,480" delta={9.4} action={<Segmented … />}>
<LineChart … />
</ChartCard>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title / value | string / ReactNode | required | Header text and number. |
| delta / invert | number / boolean | Change pill. | |
| action | ReactNode | Header controls. | |
| footer | ReactNode | A takeaway under the chart. |