Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Donut Chart

A pie with a hollow center: five browser shares on a ring, with room in the middle for a total or an icon. A donut chart for React on Recharts.

Framework
Charting library

Preview

Preview width

About

A donut is a pie with its middle taken out. The slices still show shares of one total, but the ring reads lighter on a dashboard and leaves the center free for a number, a label or an icon. Use the plain pie when every pixel should carry data.

Five browser slices run around a ring with a 60px hole, each in its own chart color. Hovering a slice shows its name and count.

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

Usage

import { ChartPieDonut } from "@/components/charts/chart-pie-donut";
<ChartPieDonut />

Customize

  • <Pie data={chartData} dataKey="visitors" nameKey="browser" innerRadius={60} /> draws the ring; innerRadius is what turns the pie into a donut.
  • Each row's fill, such as var(--color-chrome), colors its sector; ChartContainer defines those variables from chartConfig.
  • <ChartTooltip content={<ChartTooltipContent hideLabel />} cursor={false} /> shows the browser and count with no title row.
  • outerRadius defaults to 80% of the chart; set it with innerRadius to tune the ring's thickness.

FAQ

How do I change the size of the hole?

innerRadius={60} on <Pie> sets the hole in pixels. The ring's thickness is outerRadius minus innerRadius; outerRadius defaults to 80% of the chart. Use a percentage such as innerRadius="60%" to keep the ratio as the chart grows.

How do I put a number in the middle?

Put a <Label> inside <Pie> with a content function. It gets the viewBox center (cx, cy); return a <text> there with textAnchor="middle". The Donut Chart with Text has the full version.

Can I round the slices or space them out?

cornerRadius on <Pie> rounds each sector, and paddingAngle opens a gap of that many degrees between them. The two together give the rounded, spaced ring many dashboards use.

When is a donut better than a pie?

When there's something to say in the middle, or when a ring sits better among cards and text than a solid disc. For comparing slices, both read the same; past six or seven parts, neither does, and a bar chart is clearer.

Can I read the slices with the keyboard?

<Pie> is focusable: rootTabIndex defaults to 0. Recharts' arrow-key tooltip is built around a chart's axis, so test a pie with the keyboard before relying on it, and keep the numbers in text nearby.

API Reference

ChartContainer

PropType
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>

PropType
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>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
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 – any

payload – 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.

All 70 charts