Shadcn.io is not affiliated with official shadcn/ui
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
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.
An interactive pie chart preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
A donut chart with text
A React donut chart with centered text displaying total value using Label component inside the center hole with shadcn/ui and Recharts
A pie chart with a label
A React pie chart with automatic value labels on each slice for immediate data reading without tooltips using shadcn/ui and Recharts