ChartCard Component

A powerful chart card component built on top of the CardLayout system. Demonstrates how master components can be extended for specific use cases while maintaining consistency and flexibility.

Basic Chart Cards

line

Revenue Trend

Monthly revenue performance

📈

Line Chart

6 data points

bar

Sales Performance

Product category sales

$12,450
Total Revenue
12.5%
1,234
Orders
2.1%
📊

Bar Chart

6 data points

pie
Revenue
Orders
Returns

Market Share

Competitor analysis

🥧

Pie Chart

4 data points

Interactive Chart Cards

area

Analytics Dashboard

Real-time data with controls

$12,450
Total Revenue
12.5%
1,234
Orders
2.1%
3.2%
Conversion
0.8%
$89.50
Avg. Order
5.2%
📈

Area Chart

6 data points

scatter
Revenue
Orders
Returns

Business Intelligence

Comprehensive data visualization

$12,450
Total Revenue
12.5%
1,234
Orders
2.1%
3.2%
Conversion
0.8%
$89.50
Avg. Order
5.2%
🔵

Scatter Chart

6 data points

Chart States

line

Loading Chart

Data is being fetched

Loading chart...

bar

Error Chart

Failed to load data

⚠️

Failed to load chart

pie

Empty Chart

No data available

📊

No data available

gauge

Ready Chart

Data loaded successfully

🎯

Gauge Chart

2 data points

Chart Types

line

Line Chart

Example line visualization

📈

Line Chart

6 data points

bar

Bar Chart

Example bar visualization

📊

Bar Chart

6 data points

pie

Pie Chart

Example pie visualization

🥧

Pie Chart

6 data points

area

Area Chart

Example area visualization

📈

Area Chart

6 data points

scatter

Scatter Chart

Example scatter visualization

🔵

Scatter Chart

6 data points

heatmap

Heatmap Chart

Example heatmap visualization

🔥

Heatmap Chart

6 data points

gauge

Gauge Chart

Example gauge visualization

🎯

Gauge Chart

6 data points

Responsive Layouts

line

Horizontal Chart Layout

Media and content side by side

$12,450
Total Revenue
12.5%
1,234
Orders
2.1%
📈

Line Chart

6 data points

bar
Revenue
Orders
Returns

Full Width Dashboard

Maximum impact layout

$12,450
Total Revenue
12.5%
1,234
Orders
2.1%
3.2%
Conversion
0.8%
$89.50
Avg. Order
5.2%
📊

Bar Chart

6 data points

Custom Chart Implementation

line

Custom Chart

Using children prop for custom implementation

$12,450
Total Revenue
12.5%
1,234
Orders
2.1%
📊

Custom Chart Implementation

You can pass any React component as children

scatter

Interactive Custom Chart

Custom chart with interactive elements

120
Jan
180
Feb
150
Mar
220
Apr
190
May
280
Jun