Donut chart
Segments sweep round a ring one after another, the centre counts up to the total (or the first share), and a legend lists each part.
data/donut- Data
- chart
- Full frame
- 6 s (3–30 s)
Render it
npx volito render data/donut --prop title="Where the hours went" --prop centerLabel="on editing" --out donut.movThat writes ProRes 4444. The same item in another shape, brand or format:
volito render data/donut --aspect 9:16 --style cobalt --out donut-9x16.mov
volito render data/donut --format mp4 --out donut.mp4
volito still data/donut --t 3 --out donut.png
volito info data/donut # every prop and part
volito add data/donut # copy its source into ./motion to editFrom Node:
import { findItem, renderVideo } from "volito";
await renderVideo(findItem("data/donut"), { props: { title: "Where the hours went", centerLabel: "on editing" }, out: "donut.mov" });Or ask an agent with the MCP server connected: “Render the Volito donut chart (data/donut) in 9:16, in our brand.”
Props
Set each with --prop name=value, or all at once with --props and a JSON object.
| Prop | Type | Default | Takes |
|---|---|---|---|
title | text | Where the hours went | ≤ 50 chars |
rowsRows (Label: value) | list | {"label":"Editing","value":46}; {"label":"Rendering","value":12}; {"label":"Review","value":18}; {"label":"Publishing","value":9} | — |
centerCentre shows | choice | first share | total | first share |
centerLabelCentre label | text | on editing | ≤ 20 chars |
prefixBefore numbers | text | — | ≤ 3 chars |
suffixAfter numbers | text | h | ≤ 6 chars |
decimals | number | 0 | 0 – 3 |
Parts
Each part takes any move, ease or idle: --motion ground.in=pop.
| Part | What it is |
|---|---|
ground | the ground |
title | the heading |
ring | the segments |
center | the number in the middle |
legend | the legend |
More in Data
Line chart
A line draws on through its points over a soft area, each point popping as the line reaches it, the last value called out, against an optional target.
Bar chart race
Ranked bars grow and overtake each other as the periods advance; the axis rescales and the period counts up in the corner.
Goal meters
Rows of capsule meters fill to their share of a goal, each with its label and a percentage counting up.
Versus
Two sides face off: a label and a big number counting up on each, a VS badge popping between them and a split bar settling to their ratio.
Timeline
Milestones along a line that draws itself: each date's dot pops as the line reaches it and its words rise beside it.
Funnel
Stages stack from widest to narrowest, each dropping in with its count, and the share that carries on to the next stage between them.