Pie Chart

The .pie style renders items as equal-sized wedges of a circle. Like all styles in this extension, it is activated via filters: [diagrams].

Basic usage

::: pie
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
::: item
David
:::
::: item
Eve
:::
:::

Alice

Bob

Carol

David

Eve

Donut

Add the .donut modifier to render the pie with a hollow center. All other pie features — per-slice color=, node-color=, and .gap — work the same way.

::: {.pie .donut}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
::: item
David
:::
:::

Alice

Bob

Carol

David

Hole size

Control the ring thickness with hole=, given as a fraction of the radius (default 0.55, clamped between 0.2 and 0.85). A larger value means a bigger hole and a thinner ring.

::: {.pie .donut hole="0.7"}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol

Center text

Use center= to place a label or figure in the middle of the donut.

::: {.pie .donut center="100%"}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
::: item
David
:::
:::

Alice

Bob

Carol

David

Arrow

Add the .arrow modifier for a donut sub-variant where the segments are separated by chevron-shaped seams pointing clockwise, so the ring reads as a cyclical flow. It implies .donut, so hole=, center=, per-item color=, and annotations all work the same way.

::: {.pie .arrow center="Steps"}
::: item
Plan
:::
::: item
Build
:::
::: item
Test
:::
::: item
Ship
:::
:::

Plan

Build

Test

Ship

Annotations

Give any item a nested .annotation div to attach an external callout that points at its slice with a leader line. The annotation content is free-form Markdown, so the slice keeps its own short label while the detail lives outside the chart.

Any bold text or heading inside an annotation is automatically tinted to match the slice color, which is handy for a title — but this is purely optional. A plain annotation with no bold renders as ordinary text:

::: annotation
Unpaid visitors arriving through search engine results
:::

Because the callouts and leader lines need room, nest the fenced divs with more colons on the outer fences (::::: for the chart, :::: for each item, ::: for the annotation) and leave a blank line around the inner fences.

::::: {.pie .donut center="48k visits"}

:::: item
Organic

::: annotation
**Organic** unpaid visitors arriving through search engine results
:::

::::

:::: {.item color="#e8a13c"}
Direct

::: annotation
**Direct** people typing the URL or using a saved bookmark
:::

::::

:::: {.item color="#d65db1"}
Social

::: annotation
**Social** referrals from posts and links shared on social media
:::

::::

:::::

Organic

Organic unpaid visitors arriving through search engine results

Direct

Direct people typing the URL or using a saved bookmark

Social

Social referrals from posts and links shared on social media

Annotations pair especially well with the .arrow sub-variant, giving each stage of a cyclical flow a labelled callout:

Plan

Plan define the goal and scope the work ahead

Build

Build turn the plan into a working product

Measure

Measure collect feedback and learn from the results

Annotations are optional per item — annotate all, some, or none. Items without an .annotation simply render as plain slices. They also work on a plain pie, not just a donut.

Alice

Alice has a callout

Bob

Carol

Carol also has one, with a slightly longer description that wraps

David

The leader lines can be restyled (dashed, dotted, removed) and the colors adjusted — see the Annotations concept page for the full set of ann-line, ann-line-color, and ann-title-color options, which work on every annotated layout.

Gap between slices

Add the .gap modifier to offset all slices outward, creating visible separation.

::: {.pie .gap}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
::: item
David
:::
::: item
Eve
:::
:::

Alice

Bob

Carol

David

Eve

Highlighting individual slices

Add .gap to specific items to pull those slices out while the rest stay in place.

::: pie
::: {.item .gap}
Alice
:::
::: item
Bob
:::
::: {.item .gap}
Carol
:::
::: item
David
:::
::: item
Eve
:::
:::

Alice

Bob

Carol

David

Eve

Colors

Use node-color= on the container to set a shared color, or color= on individual items to override per slice.

::: {.pie node-color="#e67e22"}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
::: item
David
:::
::: item
Eve
:::
:::

Alice

Bob

Carol

David

Eve

::: pie
::: {.item color="#e74c3c"}
Alice
:::
::: {.item color="#e67e22"}
Bob
:::
::: {.item color="#27ae60"}
Carol
:::
::: {.item color="#2980b9"}
David
:::
::: {.item color="#8e44ad"}
Eve
:::
:::

Alice

Bob

Carol

David

Eve