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

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