Shadcn UI Chart Card Block
ChartCard8 is a grouped bar chart card showing two data series side by side for each category. The chart displays paired bars with distinct colors and a legend at the bottom identifying each series. Bars have rounded top corners.
Light card surface with bars using contrasting chart colors. Each category shows two adjacent bars allowing direct comparison. The legend uses the shadcn chart legend component. Horizontal grid lines provide reference without cluttering. Bars are grouped with small gaps between pairs and larger gaps between categories.
Grouped bar charts are effective for comparing two related metrics across categories. The side-by-side positioning makes it easy to see which series is larger at each point. Common uses include desktop vs mobile, current vs previous, or any A/B comparison over time. A clear, readable format for comparative data.
Tooltips show values for both series when hovering. The legend can toggle series visibility. The chart scales well with 4-8 categories.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |