Back to Dictionary
Data & Content Visualization
●●○Customize
Racing Bar Chart
A horizontal bar chart representing timeseries data where the bars continually sort themselves on the Y-axis as their X-values increase/decrease over time.
Live Demo
React95
Vue72
Svelte48
Angular36
What It Is
A horizontal bar chart representing timeseries data where the bars continually sort themselves on the Y-axis as their X-values increase/decrease over time.
✓When to Use
- Visualizing ranking changes over time (e.g., most popular languages per year)
- Gamified leaderboards
✕When NOT to Use
- Static data sets
Configuration Tips
- 01Use FLIP (First, Last, Invert, Play) animation techniques or Framer Motion layout animations to handle the Y-axis sorting smoothly
You've Seen It In
DataIsBeautiful RedditFlourish
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a racing bar chart where items physically swap vertical positions as their values overtake each other.
Code Example (Tailwind CSS)
export function RacingBarChartDemo() {}