Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React A radial chart with stacked sections
A React radial chart with stacked bars comparing multiple metrics using stackId and center total text with shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
One gauge shows progress. Stacked gauges show comparison. This React radial chart stacks desktop and mobile RadialBar components using stackId='a', creating concentric arcs that share the same angular range. Built with shadcn/ui and Recharts with endAngle=180 for semicircle gauges and cornerRadius=5 for rounded ends, the center Label displays the total (1,830) of both metrics combined. The stacked rings enable instant visual comparison—which metric contributes more to the total, how do they proportionally relate? Perfect for comparing segments (paid vs free users), channels (desktop vs mobile traffic), or categories where both individual and total values matter.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Radial Gauge Shape
Single metric gauge chart
Radial Chart with Text
Full circle with center text
Stacked Bar Chart
Stacked linear bars
Stacked Area Chart
Stacked time-series areas
Stacked Pie Chart
Concentric pie rings
Simple Radial Chart
Separate concentric rings