Shadcn UI Chart Card Block
ChartCard3 is a dashboard-ready vertical bar chart wrapped in a card container. The card has a title and description header followed by a bar chart with X and Y axes, horizontal grid lines, and interactive tooltips. Bars have rounded top corners for a polished look.
Light card surface with bars using the primary chart color. The grid uses dashed horizontal lines. Bars are evenly spaced with rounded tops creating a softer appearance than sharp rectangles. Tooltips appear on hover showing the exact value. The chart fills the available width with consistent bar widths.
This is a fundamental chart card for categorical comparisons. Bar charts work well for showing discrete values across categories like months, products, or regions. The rounded bar tops add subtle visual refinement. A clean implementation suitable for sales data, inventory levels, or any discrete metric comparison.
The chart is responsive and bars scale proportionally with the card width. The fixed height ensures consistent layout in dashboard grids.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |