ranking
Bar Chart Race
Bars grow, reorder, and travel through time for an instantly readable ranking story.
Use this template●Guide 02
Prepare CSV data for animated charts
step by step.
Most chart problems start in the source table. A simple, rectangular dataset makes the animation predictable and gives you more time to focus on the story.
At a glance What you will learn
From clean data to a chart ready to publish.
- Use one clear header row
- Keep labels short and unique
- Normalize units and time periods
- Remove totals, notes, and merged cells
A chart-ready CSV exampleOne header row, short labels, and consistent numeric values
Channel,2023,2024,2025
Search,42,58,71
Email,35,49,63
Social,28,46,59
Partner,22,31,4401 Tutorial
Follow the workflow
Work through the steps in order for a new chart, or use them as a review checklist for an existing animation.
- 01
Define the grain
Decide what one row represents and keep it consistent. A row might represent a country, product, month, or channel—but never a mixture of levels.
- 02
Create one header row
Use a unique, descriptive name for every column. Put the category field first, followed by time periods or numeric measures.
- 03
Normalize numeric values
Use the same unit and decimal convention throughout each series. Remove currency symbols and thousands separators if they interfere with parsing.
- 04
Standardize time labels
Choose one date interval and format, such as 2022–2026, Q1–Q4, or Jan–Dec. Sort periods chronologically before import.
- 05
Handle missing data intentionally
Confirm whether a blank means zero, unavailable, or not applicable. Do not silently replace missing values unless that treatment is analytically valid.
- 06
Run a final quality check
Scan for duplicate labels, inconsistent units, unexpected totals, footnotes, and formulas that did not export as values.
02 Visual examples
Try these chart templates
Compare the motion and reading pattern before committing to a format. Each example opens as an editable, data-driven chart.
Multi-line Signals
NorthSouthWestEast
trend
Multi-line Signals
Multiple animated lines compare several signals across the same measured timeline.
Use this templateGrouped Columns
423124
Q1563829
Q2634735
Q3785443
Q4ProductServicesPartner
comparison
Grouped Columns
Grouped columns rise series by series for compact category comparisons.
Use this template03 Apply it
Related use cases
04 FAQ
Common questions
Should categories go in rows or columns?
For ranking animations, put each category in a row and each time period in a column. For a simple trend, put time periods in the first column and one or more measures in the remaining columns.
How should percentages be formatted in CSV?
Use a consistent convention across the dataset, such as 42 for 42 percent or 0.42 for a decimal share. Confirm the chart’s display format after import.
What should I do with missing values?
Determine whether the value is truly zero or simply unavailable. Preserve that distinction during cleaning, because replacing unavailable data with zero can create a misleading animation.