Pro Components
Base Components
Charts Group 6
Revenue overview comparison plus an AOV vs order volume scatter, paired in a responsive two-column layout.
Example
Revenue Overview
This Year
Last Year
$608,000.00
+87.7% vs last year
AOV vs Order Volume
$118.35
Avg. AOV
6,120
Total Orders
$724K
Total Revenue
Introduction
Charts Group 6 includes:- Revenue overview: Diverging stacked bar chart comparing this year vs last year by quarter, with a transparent gap band separating the positive and negative stacks.
- AOV scatter: Daily orders vs average order value scatter with a third dimension (revenue) encoded by point size.
- Summary stats: Each card surfaces top-line metrics — total revenue with year-over-year delta on the left, average AOV / total orders / total revenue on the right.
- Custom tooltips: Both charts ship hover panels styled with popover surfaces, gap series filtered out of the revenue tooltip.
- Responsive layout: Single column on small screens, 3fr/2fr two-column grid from
lgupward.
Usage
import { ChartGroup6 } from "@/components/ui/chart-group-6";
<ChartGroup6 />;fullYearData to drive the revenue bars and dailyMetrics to drive the scatter; revenueDomainMax and GAP_OFFSET control the bar Y-axis range and the visual gap between positive/negative stacks.