Shadcn.io is not affiliated with official shadcn/ui
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
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.
A donut chart with text preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
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