Colors

Applies to: Circle Flow, Pie

Colors work the same way across every style: node-color on the container sets a base color, and color on an item overrides for that item. arrow-color is Circle-Flow-only.

In Quarto source, write attributes without a data- prefix (e.g. node-color="#27ae60") — Pandoc auto-prefixes them in the emitted HTML.

All nodes the same color

Set node-color on the container to apply one color to all nodes.

::: {.circle-flow .node-box node-color="#27ae60"}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol

Arrow color only

Set arrow-color on the container. Arrow color is always global — per-arrow color is not supported.

::: {.circle-flow .node-box arrow-color="#e74c3c"}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol

Node and arrow color together

::: {.circle-flow .node-box node-color="#e67e22" arrow-color="#c0392b"}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol

Per-node color

Set color on individual item divs to override that node’s color.

::: {.circle-flow .node-box}
::: {.item color="#e74c3c"}
Alice
:::
::: {.item color="#e67e22"}
Bob
:::
::: {.item color="#27ae60"}
Carol
:::
:::

Alice

Bob

Carol

Mixed: base color with overrides

Set a base color on the container and override specific nodes individually.

::: {.circle-flow .node-box node-color="#2980b9"}
::: item
Alice
:::
::: {.item color="#e74c3c"}
Bob
:::
::: item
Carol
:::
:::

Colors in pie charts

The same node-color and color attributes work on .pie containers and items.

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

Alice

Bob

Carol

David

(See the Pie page for more pie-specific examples.)

Alice

Bob

Carol