Pro Components
Base Components
Charts Group 4
Bento-style grid with four chart types—area, donut, horizontal bar, and vertical bar—in varying card sizes.
Example
Weekly Comparison
This week vs last week
3,690
+12.2%
Monthly Goal
Revenue target progress
73%of goal
$36,500 / $50,000
Quick Stats
Key metrics overview
Avg. Order
$142+8.5%
New Customers
284+12.3%
Repeat Rate
34%-2.1%
Performance Metrics
Progress towards quarterly targets
Sales87%
Leads65%
Conversion42%
Retention91%
Introduction
Charts Group 4 is a bento grid of mixed charts:- Area chart: Time series in a two-column card.
- Donut chart: Distribution with legend in a single-column card.
- Horizontal bar chart: Category values in a two-column card.
- Vertical bar chart: Values by category in a single-column card.
Usage
import { ChartGroup8 } from "@/components/ui/chart-group-8";
<ChartGroup8 />;