Shadcn UI Chart Group Block
ChartGroup2 is a layout with a primary chart spanning the full width and two smaller charts below. The main chart shows revenue over time as an area chart. The two detail charts show categorical breakdowns using horizontal bar charts for sales by category and traffic sources.
Light card surfaces with the main chart using more vertical space to emphasize its importance. The detail charts are shorter and use horizontal bars which work well for categorical data with longer labels. Each chart uses a distinct color from the palette. Consistent grid and axis styling across all three charts.
This layout creates visual hierarchy with the main metric prominently displayed while supporting breakdowns are easily accessible below. The full-width main chart draws attention first, then users can explore the details. A common pattern where one metric is primary and others provide context.
The grid uses col-span to make the main chart full width. On mobile, all three charts stack vertically with the main chart first.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |