Shadcn.io is not affiliated with official shadcn/ui
A pie chart with stacked sections
A React pie chart with stacked concentric rings comparing two related datasets using multiple Pie components with shadcn/ui and Recharts
One ring tells a story. Two rings compare stories. This React pie chart renders two concentric Pie components—desktop data in the inner ring (outerRadius=60), mobile data in the outer ring (innerRadius=70, outerRadius=90)—using the same month categories for direct visual comparison. Built with shadcn/ui and Recharts, both rings share color encoding by month, making it easy to trace how January desktop compares to January mobile. This creates layered comparison visualizations showing two related datasets in compact space. Perfect for comparing time periods (this year vs last year), platforms (web vs mobile), segments (free vs paid), or any paired datasets sharing categories.
A pie chart with stacked sections preview
Installation
Related Components
Donut Chart
Single ring without stacked comparison
Simple Pie Chart
Single solid pie
Stacked Area Chart
Multiple series stacked over time
Stacked Bar Chart
Stacked bars for category comparison
Multiple Line Chart
Multiple series on same timeline
Stacked Radial Chart
Concentric radial progress bars
FAQ
Was this page helpful?
Sign in to leave feedback.