Shadcn.io is not affiliated with official shadcn/ui
React Donut Chart with Center Text
Donut chart with total value displayed in the center
React Donut Chart with Center Text preview
Put that empty center to work. This React donut chart displays the total value right in the middle of the ring, giving users both the breakdown AND the sum at a glance. The Label component with a custom content renderer positions text at the chart's center using viewBox coordinates. Built with Recharts and shadcn/ui, the total updates dynamically with your data using useMemo. Perfect for Next.js budget dashboards, portfolio overviews, or any visualization where knowing "how much total?" is as important as "what's the breakdown?"
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this chart for you — no copy-paste, no CLI:
use shadcnio to install the pie-donut-text chart into my projectRelated Components
Basic Donut Chart
Empty center version
Donut with Active State
Add hover effects
Interactive Pie Chart
Center shows selected value
Simple Pie Chart
Solid pie without center
Pie Chart with Legend
Add category legend
Stacked Pie Chart
Nested rings
FAQ
Was this page helpful?
Sign in to leave feedback.