Get it on npm

Bar chart

A ranked bar chart, full frame: each bar grows in turn with its value counting up beside it; one row can stand out in the accent.

  • essentials/bar-chart
  • Essentials
  • chart
  • Full frame
  • 6 s (3–30 s)
Live in your browser
Bar chart at 16:9
0.00 / 6.00 s
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 essentials/bar-chart --prop title="Where viewers drop off" --prop suffix="%" --out bar-chart.mov

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

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

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("essentials/bar-chart"), { props: { title: "Where viewers drop off", suffix: "%" }, out: "bar-chart.mov" });

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

Props

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

PropTypeDefaultTakes
title
Heading
textWhere viewers drop off≤ 48 chars
rows
label and value per row ("Intro: 92")
list{"label":"First 3 seconds","value":92}; {"label":"First 30 seconds","value":64}; {"label":"Halfway","value":41}; {"label":"The end","value":23}—
prefix
Before each value
text—≤ 3 chars
suffix
After each value
text%≤ 6 chars
decimalsnumber00 – 2
highlight
Row in the accent
1 for the first row; 0 for the largest value; -1 for none
number0-1 – 7
sourcetextRetention across 300 uploads≤ 60 chars

Parts

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

PartWhat it is
groundthe brand's ground
titlethe heading
rowseach row (label, bar, value)
sourcethe source line

Tags: chart, data, ranking, comparison, bars, graph, statistics

More in Essentials

Lower third

A name plate over footage: an accent spine grows, the plate wipes in, the name rises, the role slides in.

Title card

A full-frame chapter or opening title: a kicker chip, the title built letter by letter, a brush underline, a subtitle — over the brand's ground with an outlined number drifting behind.

Kinetic headline

Big words that pop in one by one — on the voice when you give it a transcript — with a marker swiped under the *starred* words.

Subscribe

A call to action over footage: the channel card springs in, a cursor glides onto the button and presses it, the bell rings.

Social handle

Your handle in a corner: a pill with the platform's icon slides in, a follow button presses, it tucks away.

Callout

Points at something in the shot: a ring pulses on the spot, a line draws out to a label card that pops in beside it.