Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Bar Chart Race

The racing bar chart: your names and numbers over the years, bars overtaking each other until a winner emerges.

Text layer, V4 Titles2D419 lines of codev1.0.0

In Text & data

Next: Kinetic Title RevealSurprise me

Bar Chart Race preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Open in the title maker

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

One entry per row, rows separated by ; — a name, then one number per period. Example: Apples 42 48 55; Pears 30 45 50

One label per number: 2019 2020 2021, or Jan Feb Mar, or with commas when labels have spaces (Week 1, Week 2). A single year counts up.

For example $ or €.

For example k, % or pts.

0
7

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 646 KB)
Info

What it is

Type your entries and their values for each period (years, months, weeks) and watch them race: bars grow and slide past each other, values tick up and the period rolls over in the corner. Choose the title, the units, how many bars are on screen, a dark or light theme and a colour palette. The sample figures are made up; replace them with your own.

Reuse it in your own idea

  • "Most popular over the years": a dozen entries, a value per year, visible: 10, and a 30-second duration.
  • Business update: the light theme with a $ prefix and k unit for monthly sales by region.
  • Over your own background: draw a Gradient Background first, then the race with background: false.

Which part is reusable

src/bar-chart-race.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • Values glide smoothly between the numbers you give; the chart does not show real values in between periods.
  • Negative values are drawn as zero.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/bar-chart-race.js
Exports
  • createBarChartRace({ entries, periods?, title?, subtitle?, prefix?, unit?, decimals?, visible?, palette?, theme?, badges?, background?, duration?, intro?, hold?, fontFamily? }) => { draw(ctx, { time }, width, height), valuesAt(time), ranksAt(time), periodAt(time), timing }
  • parseRaceData(text) => { name, values }[]
  • parsePeriods(text, count) => string[]
  • PALETTES: { vivid, pastel, neon }
  • THEMES: { dark, light }
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Fills the canvas it is given, any aspect ratio; title top left, the period bottom right.

Lighting: None.

Timing: draw is a pure function of time: 0.8 s for the bars to grow in, the periods spread evenly, then 1.5 s on the final standings.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · not a loop — A race from the first period to the last, holding on the final standings.
Tested
Rendered 360 frames on 2026-10-05 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical.
Performance
Overtakes are found once when the race is created; each frame is a few dozen fills and text draws. Negligible. Best with up to about 20 entries and 12 bars on screen; names longer than the space after the bar are shortened with an ellipsis.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- bar-chart-race/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:8750200e31d0d5be…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Adapted from the owner's threejs-sketches/data-information/leaderboard-shuffle (MIT), rebuilt for AI Pixel Wizard in October 2026 as a 2D bar chart race with your own data: labelled bars, smooth overtakes, ticking values, an animated axis and period, and the frame/time contract.
BinMore like this

More like this

Play these full screen