Shadcn UI Chart Card Block
ChartCard12 is a stacked bar chart with a minimal layout, showing only X-axis labels and no Y-axis or grid lines. The chart displays three stacked segments per bar with a legend at the bottom identifying each series. The reduced chrome creates a cleaner, more compact appearance.
Light card surface with the chart using three distinct colors for segments. No grid lines or Y-axis values visible, relying on the legend and tooltips for exact values. The top segment has rounded corners. Generous horizontal margins center the bars within the chart area.
This minimal approach works well when the relative comparison matters more than precise values, or when the card appears in a dense dashboard where visual noise should be reduced. The legend and tooltips provide the detail when needed. A good choice for quarterly summaries or high-level breakdowns where the shape matters more than exact numbers.
Tooltips reveal the exact values on hover, compensating for the hidden Y-axis. The chart remains fully interactive despite the minimal chrome.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |