Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Pie

A donut chart with an active sector for React

A donut chart with its first sector pushed outward to highlight it.

Framework
UI library

Use it to point at one slice while keeping the whole visible. The ring is a Pie with an innerRadius, and a shape function draws the first slice with a larger outer radius so it stands out from the others.

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 does the Chrome slice stick out?

Pie sets shape to renderSector. When index equals ACTIVE_INDEX, which is 0, that function passes outerRadius plus 10 to Sector. The Chrome row is first, so Chrome is the slice that grows.

How do I pop out a different slice?

Change ACTIVE_INDEX. The order is Chrome, Safari, Firefox, Edge, Other. Pie still uses dataKey visitors, nameKey browser, innerRadius 60, and strokeWidth 5.

Where do the slice colors come from?

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

What does the tooltip show for a slice?

ChartTooltipContent sets hideLabel, and cursor is false. The name comes from nameKey browser, looked up in config, and the value is visitors.

How big is the donut?

ChartContainer is mx-auto aspect-square max-h-[250px]. The hole is innerRadius 60. The active slice is drawn 10px past the outerRadius the other slices use.

What does strokeWidth do here?

Pie sets strokeWidth to 5, which is the stroke around every slice, including the one renderSector pushes out. That function only changes outerRadius.

All 70 chart examples