Overview
ChartCard provides a standardized wrapper for all chart components, ensuring consistent headers, loading states, empty states, and drill-down navigation across your dashboard.
Features
- Consistent header with title and description
- Built-in loading skeleton state
- Empty state with customizable message
- Drill-down link or click handler
- Configurable chart height
- Works with any chart component
Examples
Basic Chart Card
With title and description
Submissions Over Time
Last 6 months of activity
With Drill-Down
With navigation link
Loading State
Skeleton during data fetch
Empty State
When no data is available
User Activity
Last 30 days
No activity recorded yet. Data will appear once users start participating.
Custom Height
With custom container height
Compact (200px)
Tall (400px)
Click Handler
With onClick instead of href
Interactive Chart
Click to show modal
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Card title |
description | string | - | Optional description below title |
children | ReactNode | required | Chart component to render |
href | string | - | Drill-down navigation URL |
drillDownLabel | string | - | Label for drill-down link |
onDrillDown | function | - | Click handler for drill-down |
isLoading | boolean | false | Show loading skeleton |
isEmpty | boolean | false | Show empty state |
emptyMessage | string | - | Custom empty state message |
height | number | string | 300 | Chart container height |
Usage
import { ChartCard, LineChart, DonutChart } from '@/ui/components/charts';
// Basic chart card with LineChart
<ChartCard title="Submissions Over Time" description="Last 6 months">
<LineChart
data={data}
series={[{ key: 'submissions', label: 'Submissions' }]}
/>
</ChartCard>
// With drill-down link
<ChartCard
title="Activity Trends"
href="/reports/activity"
drillDownLabel="View Full Report"
>
<LineChart data={data} series={series} />
</ChartCard>
// Loading state
<ChartCard title="Loading..." isLoading />
// Empty state
<ChartCard
title="No Data Yet"
isEmpty
emptyMessage="Start collecting data to see trends"
/>