Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Donut centers shouldn't sit empty. This React donut chart uses the Label component with a custom content function to render centered text showing the total visitor count (1,125) and label. Built with shadcn/ui and Recharts, the center text uses viewBox coordinates (cx, cy) for perfect positioning. Two tspan elements create the large number and small caption. This transforms the donut from pure proportion visualization to a KPI display—users see both the total AND the breakdown. Perfect for dashboards showing total revenue with category splits, user counts by segment, or any metric where the sum matters as much as the parts.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Donut Chart
Donut without center text
Interactive Donut Chart
Dynamic center text based on active sector
Active Donut Chart
Highlighted sector with expansion
Radial Chart with Text
Circular progress with center value
Simple Pie Chart
Solid pie without center hole
Pie with Legend
Legend showing categories