Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React A pie chart with a legend
A React pie chart with legend component for category identification separate from the chart using shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Legends solve the label problem. This React pie chart uses ChartLegend and ChartLegendContent components to display category names with color indicators below the chart, keeping the pie itself clean and uncluttered. Built with shadcn/ui and Recharts, the legend uses flex-wrap with basis-1/4 for responsive multi-row layout, showing each browser with its corresponding color swatch. This approach works better than on-chart labels when you have many categories, long category names, small slices where labels don't fit, or when you want a minimal aesthetic. Perfect for dashboards, reports, or any visualization where spatial efficiency and clean design matter.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Pie Chart
Pie without legend, tooltip-only
Pie Chart with Labels
Values shown directly on slices
Pie with Label List
Category names on slices
Area Chart with Legend
Legend for multi-series area chart
Multiple Bar Chart
Grouped bars with implicit legend
Multiple Line Chart
Multi-series line comparison
Questions you might have
React A pie chart with a label
A React pie chart with automatic value labels on each slice for immediate data reading without tooltips using shadcn/ui and Recharts
React A pie chart with no separator
A React pie chart with no separators between slices using stroke='0' for seamless color transitions with shadcn/ui and Recharts