Shadcn.io is not affiliated with official shadcn/ui
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
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.
A pie chart with a legend preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
A pie chart with a label list
A React pie chart with LabelList displaying category names on slices using custom formatter with shadcn/ui and Recharts
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