Shadcn UI Chart Card Block
ChartCard5 is a donut chart card with a center stat and side legend. The layout places the donut chart on the left with total value displayed in the center hole. A legend list on the right shows each category with a colored indicator and value.
Light card surface with the donut using distinct chart colors for each segment. Small padding angles create visual separation between segments. The center area displays a large total value with a small label below. The legend uses colored dots matching segment colors. Values are right-aligned in the legend for easy scanning.
This layout combines the visual impact of a donut chart with the precision of a legend list. Users can see proportions at a glance in the chart while referencing exact values in the legend. The center stat provides a quick total without calculation. A polished pattern for breakdowns and composition displays.
The horizontal layout with chart and legend side by side works well in wider cards. On narrow screens, consider stacking the legend below the chart.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |