Skip to main content

​
Install

That writes one file: compositions/bar-chart-race.html.

​
Add it to your video

It runs for 12 seconds at 1920×1080. Paste this into your composition:
index.html
Move it in time with data-start. Put it on a different timeline row with data-track-index. See data attributes for the rest.

​
Change how it looks

Set these CSS variables on the block:
  • title — Title. Defaults to Streaming Subscribers by Service.
  • subtitle — Subtitle. Defaults to Ranked by reported subscribers.
  • periods — Period labels (comma separated). Defaults to 2019, 2020, 2021, 2022, 2023, 2024.
  • series — Series (one per line: Name: v1, v2, …). Defaults to Northwind: 42, 58, 71, 96, 118, 131 Cobalt: 30, 46, 68, 92, 126, 168 Ferry: 55, 62, 66, 70, 74, 79 Marlow: 18, 33, 52, 61, 88, 104 Aster: 25, 28, 44, 58, 63, 72 Pell: 12, 20, 39, 47, 55, 90 Quill: 8, 11, 15, 24, 40, 66 Dunmore: 35, 37, 38, 40, 42, 44.
  • barCount — Bars shown. Defaults to 6.
  • periodDuration — Seconds per period. Defaults to 2.
  • valuePrefix — Value prefix. Defaults to $.
  • valueSuffix — Value suffix. Defaults to M.
  • valueDecimals — Value decimals. Defaults to 0.
  • accent — Leader accent. Defaults to #c8452d.
Tagged data chart statistics ranking.