Shadcn UI Chart Card Block
ChartCard10 is a vertical stacked bar chart wrapped in a card container. Each bar contains three stacked segments representing different categories. The total bar height shows the sum while segments show individual contributions. A legend at the bottom identifies each segment.
Light card surface with distinct colors for each segment. The top segment has rounded corners while middle and bottom segments have square edges for clean stacking. Horizontal grid lines provide value reference. The legend uses the shadcn chart legend component with color indicators.
Stacked bar charts work well for comparing totals across categories while also showing the breakdown. The discrete bars make it easier to compare specific time periods than stacked areas. A common pattern for acquisition channel breakdowns, budget allocations, or any categorical composition data.
The chart maintains readable bar widths at various card sizes. Tooltips show all segment values when hovering.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |