Shadcn UI Chart Card Block
ChartCard11 is a horizontal 100% stacked bar chart wrapped in a card container. Each bar spans the full width with segments sized proportionally to show percentage breakdown. Category labels appear on the left Y-axis with percentage scale on the X-axis. A legend identifies each segment type.
Light card surface with horizontal bars using three distinct colors. All bars are the same total length, emphasizing proportional comparison rather than absolute values. The X-axis shows percentage labels. Vertical grid lines are hidden for cleaner appearance. Rounded corners on the outer edges of each bar.
The 100% stacked format is ideal when comparing proportions across categories regardless of their total size. This chart normalizes the data so viewers focus on the mix rather than volume. Useful for inventory status, survey responses, or any data where relative distribution matters more than absolute numbers.
Category labels on the left accommodate longer text than vertical X-axis labels would allow. The horizontal layout reads naturally left to right.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |