Shadcn.io is not affiliated with official shadcn/ui
React Donut Chart with Active State
Donut chart with visual emphasis on hovered segments
React Donut Chart with Active State preview
Make hover states pop. This React donut chart uses strokeWidth to add visual weight to segments, creating subtle emphasis that makes the chart feel interactive. When users hover over a segment, the thicker stroke draws attention to it. Built with Recharts and shadcn/ui, you can combine this with activeShape for even more dramatic hover effects—enlarging segments or changing opacity. Perfect for Next.js dashboards where segments trigger detail panels or where you want to encourage exploration of the data.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this chart for you — no copy-paste, no CLI:
use shadcnio to install the pie-donut-active chart into my projectRelated Components
Basic Donut Chart
Simple donut without effects
Donut with Center Text
Add total in middle
Interactive Pie Chart
Full interactivity with selector
Simple Pie Chart
Solid pie version
Bar Chart Active State
Similar pattern for bars
Pie Chart with Legend
Add category identification
FAQ
Was this page helpful?
Sign in to leave feedback.