# Bar Race Chart

> Bar race chart for React and Tailwind CSS (shadcn/ui) that re-sorts its ranked horizontal bars with motion whenever the data changes, so bars overtake each other instead of snapping into a new order. It is built for leaderboards, top-products widgets and period-over-period dashboards where rank is the story. A bar race chart is a ranked bar chart whose position, length and value label are all animated between data frames; this one uses FLIP translate animations with the Web Animations API, animates bar widths and rolls the numbers, shows small rank-change chips (up, down, new) that fade on their own, slides new entrants in from below the fold and fades displaced rows out. Colors come from the shadcn chart tokens, per row or auto-assigned. Supports topN, sort order, a fixed max scale, duration, row height, number formatting, caption and period labels, optional icons per row, reduced motion, and a visually hidden table for screen readers. The chart only reacts to its data prop; the included demo steps through ten months of sample data with play, pause and a scrubber and makes no requests. Requires React only, with no chart or animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Chart, Bar Chart, Leaderboard, Data Visualization, Dashboard
- Live preview: https://21st.dev/@dhxwhy/components/bar-race-chart

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/bar-race-chart?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/chart.md