Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Pie

A pie chart with a legend for React

A pie chart with a wrapping legend of browsers below it.

Framework
UI library

Use a legend instead of labels when there are several categories or the slices are small. ChartLegend renders ChartLegendContent under the pie, with each browser's swatch and name, wrapped onto rows a quarter wide.

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 is the legend attached?

PieChart renders ChartLegend with content set to ChartLegendContent. nameKey is browser on both Pie and ChartLegendContent, so each item looks up chrome and the other keys in config.

How do the legend items wrap?

ChartLegendContent sets className to -translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center. Items wrap, each takes a quarter of the row, and the block is shifted up by translate-y-2.

Where does the legend sit?

ChartLegend keeps the default verticalAlign of bottom. ChartContainer is mx-auto aspect-square max-h-[300px], which leaves room for that legend under the circle.

What text does each legend item show?

config labels are Chrome, Safari, Firefox, Edge, and Other, with colors --chart-1 through --chart-5. The swatch color comes from those entries. This demo has no ChartTooltip.

What do the slices measure?

Pie uses dataKey visitors. The counts are Chrome 275, Safari 200, Firefox 187, Edge 173, and Other 90. Each row's fill is var(--color-chrome) or the matching browser variable.

What wraps the chart?

The outer frame is w-full max-w-xl with a border, background, and padding. The pie itself has no labels on the slices. The names live in the legend.

All 70 chart examples