Shadcn.io is not affiliated with official shadcn/ui
React Pie Chart with Legend
Pie chart with legend below for category identification
Keep the chart clean, explain with legend. This React pie chart uses ChartLegend below the chart instead of labels on segments—maintaining visual clarity while still identifying each category. The legend automatically pulls colors and names from your data via nameKey. Built with Recharts and shadcn/ui, the flex-wrap layout handles many categories gracefully. Perfect for Next.js dashboards where segment labels would overlap, or when you want users to focus on proportions first and details second.
React Pie Chart with Legend preview
Installation
Related Components
Labeled Pie Chart
Labels on segments
Simple Pie Chart
No labels or legend
Area Chart with Legend
Legend for area charts
Stacked Bar with Legend
Legend for stacked bars
Donut Chart
Add center hole
Interactive Pie Chart
Add filtering controls
FAQ
Was this page helpful?
Sign in to leave feedback.