Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Pie

An interactive pie chart for React

A donut chart with an active sector, a ring around it and its value in the center.

Framework
UI library

Use it to show one category's value while keeping the whole in view. The active slice grows and gets a ring around it, and the center of the donut shows that slice's value. The active slice is set by one constant, ready to wire to your own selection.

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 do I choose which slice is active?

ACTIVE_INDEX is 0, the first row, January. Change that number. shape is renderSector, which checks index === ACTIVE_INDEX. This file doesn't wire the index to a click or a hover.

What does the active slice look like?

For that index, renderSector draws one Sector with outerRadius plus 10, then a second Sector from outerRadius + 12 to outerRadius + 25. Every other index is a single Sector at the normal outerRadius.

How does the center get the active value?

Label uses content={renderActiveValue} inside Pie. It prints desktopData[ACTIVE_INDEX].desktop with toLocaleString, and the caption Visitors. The number uses text-3xl. The caption sits at viewBox.cy + 24.

How is the hole sized?

Pie sets innerRadius={60}, dataKey="desktop", nameKey="month", and strokeWidth={5}. The stroke separates the slices. The rows are january through may, and each fill is var(--color-january) and the same pattern for the other months.

What does the tooltip call each slice?

ChartTooltipContent sets hideLabel. nameKey="month" on Pie names the slice january (and the other months), and the tooltip looks that key up in config for January, February, March, April, and May. cursor={false} turns the hover cursor off.

How do I put the month name in the center?

The caption is the string Visitors. The active row's month is a key in config, so chartConfig[desktopData[ACTIVE_INDEX].month].label is January when the index is 0. The chart frame is aspect-square w-full max-w-[300px].

All 70 chart examples