Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React An interactive pie chart
An interactive React donut chart with active sector emphasis and dynamic center text showing selected value using shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
The best charts respond to users. This interactive React donut chart combines activeShape highlighting with dynamic center Label text—when a sector is active, it pops out AND the center displays that month's specific value. Built with shadcn/ui and Recharts with dual Sector rendering for layered emphasis, it creates a two-tier focus system: the outer ring shows context, the active sector plus center text show details. Users get both overview and drill-down in one compact visualization. Perfect for executive dashboards, data exploration interfaces, or any context where users need to examine individual categories while maintaining awareness of the whole.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Active Donut Chart
Active sector without center text
Donut with Center Text
Static center text showing totals
Standard Donut Chart
Basic donut without interactivity
Active Bar Chart
Interactive bar with highlighting
Simple Pie Chart
Solid pie without donut hole
Radial Chart with Label
Circular progress with center text
Questions you might have
React A donut chart
A React donut chart with center hole for adding text or emphasis using innerRadius with shadcn/ui and Recharts
React A pie chart with a custom label
A React pie chart with custom label rendering for full control over label content, positioning, and styling using shadcn/ui and Recharts