Shadcn UI Chart Group Block
ChartGroup1 is a two-column layout displaying two different chart types side by side. The left card shows a revenue area chart with gradient fill. The right card shows an orders bar chart. Both charts share the same time axis for easy comparison.
Light card surfaces with each chart using a distinct color from the chart palette. The area chart uses a gradient fill while the bar chart has rounded tops. Both charts have consistent styling with horizontal grid lines, no vertical lines, and matching axis formatting. Equal card heights create visual balance.
This layout is the most common pattern for showing two related metrics together. The side-by-side arrangement makes comparison easy while keeping each metric in its own space. Using different chart types adds visual variety and matches each metric to an appropriate visualization. A practical starting point for dashboard analytics sections.
The grid is responsive, stacking to single column on mobile. Both charts maintain their aspect ratios when stacked.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |