> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.
# Bar Chart Race
> Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads
# Bar Chart Race
Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads
**Bar Chart Race**
```html bar-chart-race.html
Bar Chart Race
Streaming Subscribers by Service
Ranked by reported subscribers
Period2019
Placeholder data
```
Copy npx hyperframes add bar-chart-race to the clipboard
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:
```html index.html
```
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes.md) 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`.
## Variables
Every one of these has a default, so the piece works untouched. Set the ones you
want to change on the element:
| Variable | Default | Accepts | What it does |
| - | - | - | - |
| `title` | `Streaming Subscribers by Service` | string | |
| `subtitle` | `Ranked by reported subscribers` | string | |
| `periods` | `2019, 2020, 2021, 2022, 2023, 2024` | string | |
| `series` | \`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\` | string | | |
| `barCount` | `6` | 3 to 12, step 1 | |
| `periodDuration` | `2` | 0.4 to 6, step 0.1 | |
| `valuePrefix` | `$` | string | |
| `valueSuffix` | `M` | string | |
| `valueDecimals` | `0` | 0 to 3, step 1 | |
| `accent` | `#c8452d` | color | |
Set them with `data-variable-values` on the element that mounts it. These are the
defaults, so this behaves exactly like the preview above until you change one:
```html wrap
```
{/* hf:generated-footer */}
Tagged `data` `chart` `statistics` `ranking`.
## Related topics
* [Browse the complete Catalog](/catalog.md)
* [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md)
* [Put blocks together into one video](/concepts/compositions.md)