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.
data/bar-race- Data
- chart
- Full frame
- 8 s (4–60 s)
Render it
npx volito render data/bar-race --prop title="Most-used editing tools" --prop suffix="K" --out bar-race.movThat writes ProRes 4444. The same item in another shape, brand or format:
volito render data/bar-race --aspect 9:16 --style cobalt --out bar-race-9x16.mov
volito render data/bar-race --format mp4 --out bar-race.mp4
volito still data/bar-race --t 4 --out bar-race.png
volito info data/bar-race # every prop and part
volito add data/bar-race # copy its source into ./motion to editFrom Node:
import { findItem, renderVideo } from "volito";
await renderVideo(findItem("data/bar-race"), { props: { title: "Most-used editing tools", suffix: "K" }, out: "bar-race.mov" });Or ask an agent with the MCP server connected: “Render the Volito bar chart race (data/bar-race) 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 | Most-used editing tools | ≤ 50 chars |
periods | list | 2022; 2023; 2024; 2025; 2026 | — |
rowsRows (Name: v1, v2, …) | list | {"label":"MONARC","values":"4, 14, 38, 72, 118"}; {"label":"Studio A","values":"60, 66, 70, 71, 72"}; {"label":"Cutter","values":"40, 48, 52, 50, 46"}; {"label":"Frame.io","values":"22, 30, 41, 47, 51"}; {"label":"Clipmate","values":"35, 30, 24, 20, 18"}; {"label":"Reelsy","values":"8, 20, 33, 44, 49"} | — |
showBars shown | number | 6 | 3 – 10 |
prefixBefore numbers | text | — | ≤ 3 chars |
suffixAfter numbers | text | K | ≤ 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 |
bars | the bars |
period | the period in the corner |
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.
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.
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.