Shadcn.io is not affiliated with official shadcn/ui
React Stacked Pie Chart
Concentric pie charts with two data series as nested rings
React Stacked Pie Chart preview
Compare two distributions at once. This React chart stacks two pie charts concentrically—desktop traffic in the inner ring, mobile in the outer ring. Each ring shows its own proportional breakdown while using matching colors for the same categories. Built with Recharts and shadcn/ui, you create nested rings by setting different innerRadius and outerRadius values on each Pie component. Perfect for Next.js dashboards comparing current vs previous period, desktop vs mobile, or any two related categorical distributions.
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-stacked chart into my projectRelated Components
Single Donut Chart
One ring only
Simple Pie Chart
Single solid pie
Donut with Center Text
Add total in middle
Stacked Bar Chart
Similar comparison with bars
Stacked Area Chart
Time-based comparison
Multiple Radar Chart
Radial comparison
FAQ
Was this page helpful?
Sign in to leave feedback.