Pro Components

Base Components

Charts Group 1

Business analytics bento with date navigation, compare toggle, export menu, and switchable chart views in a bento grid.

Example

Business Analytics

30 days selected · Mar 12 - Apr 10, 2026

Revenue

$325,140

+12.5%

Cost

$190,920

+8.2%

Profit

$130,352

+18.3%

Orders

2,360

+5.7%

Profit Margin

40.1%

+2.1%
Performance Overview
Revenue, cost, and profit trends
Device Breakdown
Traffic by device type
Desktop
58%
Mobile
32%
Tablet
10%
Customer Types
New vs returning customers
Hourly Traffic
Visitors and conversions by hour (today)

Introduction

Charts Group 1 is a business analytics dashboard:
  • Header: Date range with navigation arrows, compare toggle, and export dropdown.
  • Stats row: Key metrics (revenue, profit, orders).
  • Main chart: Tabs to switch between revenue, profit, and orders visualizations.
  • Device breakdown: Donut chart with center text.
  • Bento grid: Responsive layout with multiple chart types.
Uses Chart, Tabs, Button, DropdownMenu, Popover, Calendar, and Recharts.

Usage

import { ChartGroup15 } from "@/components/ui/chart-group-15";

<ChartGroup15 />;
Wire the date navigation and compare toggle to your data and date state as needed.

On this page