Shadcn.io is not affiliated with official shadcn/ui
A donut chart
A React donut chart with center hole for adding text or emphasis using innerRadius with shadcn/ui and Recharts
Donut charts are pie charts evolved. This React donut chart uses innerRadius=60 to create a center hole, transforming the solid pie into a ring. Built with shadcn/ui and Recharts, the empty center provides space for summary text, totals, or focus information without obscuring the proportional slices. The ring shape also reduces visual weight compared to solid pies—less overwhelming, more modern. Perfect for dashboards where you want to display a category total in the center, KPI summaries, or when showing multiple related donut charts in a compact space.
A donut chart preview
Installation
Related Components
Simple Pie Chart
Solid pie without center hole
Donut with Center Text
Total value displayed in center
Active Donut Chart
Highlighted sector with pop-out effect
Interactive Donut
Active sector with dynamic center text
Radial Chart
Circular progress visualization
Pie with Labels
Values shown on slices
FAQ
Was this page helpful?
Sign in to leave feedback.
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
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