Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React 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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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