Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React A donut chart with an active sector
A React donut chart with active sector highlighting that expands outward to emphasize selected slice using shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Static charts hide context. This React donut chart uses activeIndex and activeShape with Sector to make one slice pop out, expanding its outerRadius by 10px for visual emphasis. Built with shadcn/ui and Recharts, the active sector draws attention to specific data—like highlighting this month's performance or the user's current selection. The expansion is subtle but effective, creating hierarchy without labels or legends. Perfect for dashboards with focus states, data storytelling where one category needs emphasis, or interactive charts where users select slices to drill down into details.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Standard Donut Chart
Donut without active highlighting
Interactive Donut Chart
Active sector with dynamic center text
Donut with Center Text
Total displayed in center hole
Active Bar Chart
Highlighted bar with custom styling
Simple Pie Chart
Solid pie without donut hole
Pie with Legend
Legend for category identification
Questions you might have
React A line chart with step
A React line chart with step interpolation creating staircase visualization for values that remain constant between measurements using shadcn/ui and Recharts
React 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