Shadcn.io is not affiliated with official shadcn/ui
React Pie Chart with Legend
Pie chart with legend below for category identification
React Pie Chart with Legend preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this chart for you — no copy-paste, no CLI:
use shadcnio to install the pie-legend chart into my projectRelated 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.