Get it on npm

Waffle chart

A ten-by-ten waffle chart where each cell is one percent, filling in to the value beside the number counting up and what it measures. Squares, dots or people.

  • data/waffle
  • Data
  • chart
  • Full frame
  • 6 s (3–30 s)
Style
Live in your browser
Waffle chart at 16:9
0.00 / 6.00 s
npx volito render data/waffle --style cream --out waffle.mov
Playing live with volito/browser, the engine a render uses. Each tab lays the item out again for that shape, not a crop.

Render it

npx volito render data/waffle --prop title="Who stays to the end" --prop label="of viewers watch the whole video" --out waffle.mov

That writes ProRes 4444. The same item in another shape, brand or format:

volito render data/waffle --aspect 9:16 --style cobalt --out waffle-9x16.mov
volito render data/waffle --format mp4 --out waffle.mp4
volito still data/waffle --t 3 --out waffle.png
volito info data/waffle     # every prop and part
volito add data/waffle      # copy its source into ./motion to edit

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("data/waffle"), { props: { title: "Who stays to the end", label: "of viewers watch the whole video" }, out: "waffle.mov" });

Or ask an agent with the MCP server connected: “Render the Volito waffle chart (data/waffle) in 9:16, in our brand.”

Props

Set each with --prop name=value, or all at once with --props and a JSON object.

PropTypeDefaultTakes
titletextWho stays to the end≤ 50 chars
value
Percent
number680 – 100
labeltextof viewers watch the whole video≤ 70 chars
shape
Cells
choicesquaresquare | dot | person

Parts

Each part takes any move, ease or idle: --motion ground.in=pop.

PartWhat it is
groundthe ground
titlethe heading
gridthe grid
valuethe number
labelthe label

Tags: chart, waffle, percent, share, grid

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.

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.