Pie

Pie charts map categories to arc angles. Compose Pie with an ordinal color scale. Donut variants set inner radius; interactive demos drive a center readout from selection.

Reach for Pie when the story is share of a whole. Prefer Bar for comparing magnitudes across many categories, and Radar for multi-axis profiles.

When to useCopy Anchor Link

• A handful of categories that sum to a whole
• Donut with a center KPI
• Click-to-select slices

When not to useCopy Anchor Link

• Many thin slices that are hard to compare → Bar
• Trends over time → Line / Area

Common examplesCopy Anchor Link

SimpleCopy Anchor Link

Basic pie with hover.

LabelsCopy Anchor Link

External value labels with leader lines from each slice.

Custom tooltipCopy Anchor Link

Same external labels — tooltip row uses a fixed metric name instead of the slice name.

Label listCopy Anchor Link

Category names outside the rim, joined with thin leader lines.

LegendCopy Anchor Link

Ordinal legend under the pie.

DonutCopy Anchor Link

Ring slices with an empty center.

Donut with textCopy Anchor Link

Center readout for total visitors plus a metric label.

StackedCopy Anchor Link

Nested rings for two series.

InteractiveCopy Anchor Link

Click a slice to drive the center value.

Ask your agentCopy Anchor Link

Add a donut chart of browser share with a center total and a legend.

RelatedCopy Anchor Link

• Bar — category magnitudes
• Radar — multi-axis polar