Shadcn.io is not affiliated with official shadcn/ui
React Interactive Pie Chart
Interactive donut chart with dropdown selector for filtering
Self-contained filtering right on the chart. This React donut chart includes a dropdown selector that updates the visualization dynamically—pick a month and see its value highlighted in the center. Built with Recharts, shadcn/ui Select component, and React state, the chart maintains active segment tracking via activeIndex. The center shows the selected segment's value, providing immediate feedback. Perfect for Next.js dashboards where users need to drill down without navigating away, or compact widgets that need built-in filtering.
React Interactive Pie Chart preview
Installation
Related Components
Donut with Center Text
Static center text
Interactive Bar Chart
Same pattern with bars
Interactive Line Chart
Same pattern with lines
Interactive Area Chart
Same pattern with areas
Simple Pie Chart
Non-interactive version
Basic Donut Chart
Donut without controls
FAQ
Was this page helpful?
Sign in to leave feedback.