Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Pie

A pie chart with a label list for React

A pie chart with each browser's name printed inside its slice.

Framework
UI library

Use it when the names matter more than the numbers. A LabelList inside the Pie prints each browser's name from the chart config inside its slice, in the background color so it reads on every slice.

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 the slices show Chrome inside them?

Pie nests a LabelList with dataKey browser and formatter set to formatBrowser. That function returns chartConfig[value].label, so chrome prints as Chrome. fontSize is 12 and stroke is none.

How does the text stay readable on the slices?

LabelList sets className to fill-background. ChartContainer also sets [&_.recharts-text]:fill-background on mx-auto aspect-square max-h-[250px], so the SVG text uses the background color.

What sets the size of each slice?

Pie uses dataKey visitors. The counts are Chrome 275, Safari 200, Firefox 187, Edge 173, and Other 90. The text inside the slice is the browser name from formatBrowser.

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 the labels the formatter prints.

What does the tooltip show?

ChartTooltipContent sets hideLabel and nameKey to visitors. config labels visitors as Visitors, so the tooltip row uses that name and the visitor count.

Why is visitors in config if the labels are browser names?

visitors has a label and no color, and the tooltip's nameKey points at it. The browser keys hold both the slice colors and the words formatBrowser prints inside the pie.

All 70 chart examples