Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React A donut chart
A React donut chart with center hole for adding text or emphasis using innerRadius with shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
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
React 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