shadcn.io is not affiliated with official shadcn/ui
About
The donut people reach for first on a dashboard: the parts as a ring, the total in the middle, and nothing else on the card to read. Use it when the sum matters as much as the split. When it doesn't, the plain donut leaves the center quiet.
Five browser slices form a ring with a 60px hole. Centered inside, the total is set large and bold with "Visitors" in muted text under it.
Installation
Usage
import { ChartPieDonutText } from "@/components/charts/chart-pie-donut-text";<ChartPieDonutText />Customize
<Label content={({ viewBox }) => …} />inside<Pie>draws in the center: a<text>atviewBox.cx,viewBox.cywithtextAnchor="middle".- Two
<tspan>s split the lines:fill-foreground font-bold text-3xlfor the total,fill-muted-foreground24px lower for the label. totalVisitorsis auseMemosum ofchartData, shown withtoLocaleString().innerRadius={60}on<Pie>makes the hole. Upstream'sstrokeWidth={5}widens an outlineChartContainermakes transparent, so it draws no seam.
FAQ
How is the text placed in the center?
A <Label> inside <Pie> with a content function: it reads viewBox.cx and viewBox.cy and returns a <text> with two <tspan>s, the total and "Visitors" 24px lower.
Where does the total come from?
totalVisitors sums chartData in a useMemo and prints it with toLocaleString(). Swap the sum for any figure: an average, a percentage, last month's total.
Can the center show the hovered slice instead?
Track the hovered index with onMouseEnter and onMouseLeave on <Pie>, and have the <Label> print that row's visitors, or the total when nothing is hovered.
API Reference
ChartContainer
configChartConfig
Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.
initialDimension?{ height: number; width: number; }
The size it renders at before it's measured, so the first paint isn't * empty.
- Type
{ height: number; width: number; }- Default
INITIAL_DIMENSION
className?string
Merged with the part's classes.
ChartLegend
ChartLegendContent
<div>
hideIcon?boolean
Hides each series' icon (from config), leaving its color swatch.
- Default
false
nameKey?string
The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.
className?string
Merged with the part's classes.
ChartStyle
<style>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
hideIndicator?boolean
Hides each item's color indicator.
- Default
false
hideLabel?boolean
Hides the tooltip's label, the hovered point's.
- Default
false
indicator?"dashed" | "dot" | "line"
The color indicator's shape: a dot, a line or dashed.
- Type
"dashed" | "dot" | "line"- Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode
Formats the tooltip's label; its value is untyped, as in recharts 3.8.
- Type
(label: any, payload: TooltipPayload) → React.ReactNode- Parameters
label– anypayload– TooltipPayload- Returns
React.ReactNode
labelKey?string
The key in the data to read the label from, looked up in config.
nameKey?string
The key in each item's data to look its name up by in config.
className?string
Merged with the part's classes.
Related
Donut Chart
Pie chartsA pie with a hollow center: a donut.
Radial Chart with Text
Radial chartsOne ring of progress with the total in its center.
Radial Chart with Custom Shape
Radial chartsA thick ring with a custom end angle and the total inside.
Interactive Pie Chart
Pie chartsA donut whose active month is picked from a select.
Donut Chart with Active Sector
Pie chartsA donut with one slice pulled out as active.
Pie Chart
Pie chartsA plain pie, one slice per browser.