piechart — Lattice component

piechart

EvidenceCanvasSeries

Pie or donut chart with legend — proportional wedges.

Open in Playground
Variant

Use for part-to-whole breakdowns with three to six slices. Add the donut modifier for a hole in the middle — visually cleaner for executive decks.

donutproportionpercentage

When to use

  • Three to six parts of a whole. Time allocation, budget breakdown, mix-of-business. Past six slices the wedges become unreadable and the legend overwhelms — split or pick the top five plus an Other slice.
  • Proportions matter more than precision. Pie charts are good at 'roughly a third', bad at 'is it 28% or 31%?'. If exact differences are the argument, reach for a bar chart (progress) where the eye can compare lengths directly.
  • Donut for executive decks. The donut modifier hollows the centre — cleaner, less crowded, and the hole reads as composed rather than as a missing slice. Default to donut for board / investor decks; reserve solid pies for analyst working sessions.

When not to use

  • Slices that don't sum to a whole. A pie of unrelated metrics is meaningless — the visual implies parts of a whole. If your values are independent measures, use stats or a bar chart instead.
  • Two slices. A two-slice pie is just a percentage with extra steps. Use big-number or split-panel metric — the audience can read '38% / 62%' faster than they can decode a half-and-half disc.
  • Comparing two pies. Side-by-side pies force the audience to compare wedge angles across two figures — humans are bad at this. Use grouped bars or a slope chart to land the comparison cleanly.

Common mistakes

  • Slice values mix formats, e.g. some as 40% and others as 120 hrs in the same chart. Every slice pill in one chart shares the same unit/format. Mixing formats breaks the part-to-whole read the wedges are supposed to communicate.
  • A detail sublist under a slice authored as a numbered list. Detail sublists must be bullet (-/*) lists, not numbered — the shared chart-family detail substrate (funnel/map/quadrant/radar too) only picks up bullet lists.

Authoring

<!-- _class: piechart donut -->

`Eyebrow · context`

## What the breakdown shows.

- First slice `40%`
- Second slice `30%`
- Third slice `20%`
- Fourth slice `10%`

Slots

SlotSelectorRequiredDescription
titleh2yesSlide heading framing the breakdown.
slicesul > liyesOne li per slice: label text then a trailing inline-code value pill, e.g. - Marketing 40% (slices are drawn proportionally to the values).
detailli > ulnoOptional nested sublist under a slice. Drives two surfaces from one source via the shared chart-family detail substrate (identical to funnel/map/quadrant/radar): (1) Present/Practice — the kernel keeps the label/value as-is, tags each wedge <path> with data-mark, and emits the sublist as an inert <template class="chart-detail"> (inside a .chart-details wrapper) the reveal layer reads; (2) the static PDF — the same detail is folded into the slide's speaker note (Label (value): item · item) as a Marp-faithful comment, which notes-core lifts into the per-slide note channel (a PDF text annotation + the hidden aside). The note rides the existing channel, so the chart pixels stay byte-identical. A pie with no sublists emits no note and is unchanged. Detail sublists must be bullet (-/*) lists, not numbered.

Data shape

  • Author slices in descending value order; the engine draws wedges in source order and never auto-sorts — a shuffled list scatters the visual hierarchy the wedges are supposed to carry.
  • Keep every slice label to 1-3 words — long labels wrap and crowd the legend, which sits in a right rail beside the wedges in a landscape box or stacks below them in a portrait box (the portrait layout budgets a wider label column, but short labels still read cleanest in both).
  • Stay at 3-6 slices for the sweet spot; the palette has six hues (Wong 2011 / IBM Carbon, calibrated for perceptual distinction), so a 7th slice repeats a color already on the chart — consolidate the long tail into a single Other slice before then rather than adding a 7th.

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│          Distribution heading           │
│                                         │
│                  ╭──────╮               │
│                 │▓▓▓░░░░│               │
│             │▓▓░░░░░│  ◆ 40%            │
│             │░░░▓▓▓░│  ◇ 35%            │
│              ╰──────╯   ○ 25%           │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Variant decision rule

  • default (no modifier)Analyst or working-session decks, or a low slice count (3-4) where the full disc reads cleanly without competing for the center.
  • donutBoard/investor decks by default — the hollow center reads as composed rather than as a missing slice. The hole itself stays visually empty; a per-slice detail sublist surfaces via the interactive popover and the PDF speaker note either way, not inside the hole.

Variants

donutdonut

The center carries the total.

<!-- _class: piechart donut -->

`H1 2026 · 1,840 person-hours`

## donut opens the center for the total.

The toil-and-on-call slice is the one nobody put in the roadmap.

- Signal Intake build `46%`
- Scoring policy work `22%`
- Decision Log integration `18%`
- Explaining the framework to stakeholders `9%`
- Toil and on-call `5%`

Refreshed weekly · figures from the time-tracking export

Related

  • progresscomparable parts but precise differences matter
  • statsthe values are independent metrics, not a partition
  • big-numberthe headline is one slice, not the breakdown
  • kpithe slices need status framing and targets