Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Pie

A donut chart with text for React

A donut chart with the total number of visitors in its center.

Framework
UI library

Use it when the total matters as much as the split. The ring shows visitors by browser, and a Label inside the Pie writes the sum of all slices and the word Visitors in the hole, centered on the chart's viewBox.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the total drawn in the hole?

Pie nests a Label whose content is renderTotal. When viewBox has cx and cy, that function returns an SVG text anchored at the center with textAnchor and dominantBaseline set to middle.

How is the center number calculated?

renderTotal sums chartData with reduce, starting at 0 and adding each visitors value, then calls toLocaleString(). These rows total 1,125: Chrome 275, Safari 200, Firefox 287, Edge 173, and Other 190.

How are the number and the word Visitors stacked?

The first tspan prints the total at viewBox.cy with className fill-foreground font-bold text-3xl. The second prints Visitors at viewBox.cy + 24 with className fill-muted-foreground.

How big is the hole the text sits in?

Pie sets innerRadius to 60 and strokeWidth to 5. dataKey is visitors and nameKey is browser.

How are the slices colored?

Each row sets fill to var(--color-chrome) or the matching browser variable. config maps those keys to --chart-1 through --chart-5 and to labels Chrome, Safari, Firefox, Edge, and Other.

What does the tooltip show?

ChartTooltipContent sets hideLabel, and cursor is false. The slice name comes from nameKey browser. The center text stays the full sum. If viewBox has no cx and cy, renderTotal returns null.

All 70 chart examples