All charts

pie/*

Pie

Pie & donut — share-of-whole, small number of slices.

2 variants
@vireya/ui/charts/pie/simple

Solid pie with named slices via Cell + Legend.

client
@vireya/ui/charts/pie/donut

Donut (innerRadius + paddingAngle) opting into outside labels with custom leader lines via the `label` render prop. Labels are pure prop opt-in — `simple` shows the same pie without them.

client

Understanding Pie charts

Pie and donut charts divide a circle into slices to show parts of a single whole. They work because the slices visibly sum to 100% — but humans judge angles and areas poorly, so they only succeed with a small number of clearly different categories.

The donut variant frees the centre for a total or label, and Vireya colours each slice from your token palette with accessible tooltips.

When to use

  • Showing share-of-whole when there are only a few slices (ideally 2–5).
  • A single point-in-time composition where the total is the headline.
  • A donut when you want to surface the total or a KPI in the centre.

When to avoid

  • More than five or six slices — a sorted bar chart compares them far better.
  • Comparing compositions across time or categories (use stacked bars).
  • Slices of similar size, where small angular differences are impossible to judge.

Best practices

  • Order slices from largest to smallest, starting at twelve o'clock.
  • Label slices with their percentage directly rather than forcing a legend lookup.
  • Group tiny slices into an 'Other' bucket to avoid unreadable slivers.
  • Prefer a donut when you have a meaningful total to show in the hole.

Accessibility

  • Always show percentage labels so the chart isn't read by colour or angle alone.
  • Keep adjacent slice colours distinct for colour-vision deficiencies.
  • Provide the underlying numbers in an accessible tooltip or table.

Frequently asked questions

Is a pie chart ever the right choice?
Yes — for a single whole split into two to five clearly different parts, where the share-of-total is the message. For anything more nuanced or comparative, a bar chart is more accurate.
Pie or donut — does it matter?
Functionally they're the same; the donut's hole lets you display the total or a label, which often makes it the better pick. Avoid both once you exceed a handful of slices.
Why do data professionals warn against pie charts?
Because people estimate angles and areas inaccurately, so close values are hard to rank. Pies are fine for rough share-of-whole with few slices, but a bar chart wins whenever precise comparison matters.