What it looks like
It looks like those ranking videos that show who leads year after year. The bars sit in a column, with rank and name on the left and the value at the tip; the highlighted series is indigo and the others a grayish lilac. Every 1.4 seconds the chart moves one period ahead: bars grow smoothly, the scale adjusts and, when one bar overtakes another, both slide and swap places. The current period shows in large type in the corner, with the total. Below sit a play button and a timeline with one dot per period. On narrow screens, the name moves above the bar.
You may be looking for this if you asked for something like
- bars that swap places in a ranking over time
- a race chart like those country ranking videos
- show sales by department evolving like a competition
- an animated ranking for the annual results presentation
- a chart that plays through the years by itself and can be paused
- bars growing and overtaking each other
Also known as
- bar chart race
- racing bar chart
- animated ranking
- animated bar chart
- ranking over time
When to use
- An impact report showing departments or programs gaining ground
- A results presentation where a change of leader tells the story
- A transparency page with indicators by region over the years
- A dashboard comparing how products, channels or teams evolve
When to avoid
- Data from a single period, where there is no race to show
- Dozens of series, since all of them show at once with no top-N cut
- Dark pages or English-only products, unless your AI adapts the navy default colors and the Portuguese labels
How to ask your AI
Build a bar chart race whose ranking reorders with a FLIP animation to show deliveries by department across quarters. I want play and pause, a draggable keyboard-accessible timeline, pausing when off screen and step-by-step updates without animation for reduced motion.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Páreo
How do I pass my data to Páreo?
Use the series prop with a list of series, each with a name, one value per period and an optional color, and the periods prop with the labels. Páreo accumulates values by default; with cumulative turned off, it shows each period on its own. The highlight prop picks the emphasized series.
Does Páreo work with a keyboard and screen readers?
Yes. Páreo's timeline is an accessible slider: arrow keys change the period, Page Up and Page Down jump four, Home and End go to the ends, and Space or Enter play and pause. Screen readers get a hidden table with every value and, when the period changes by keyboard, hear who leads.
Does Páreo respect reduced motion settings?
Yes. With reduced motion on, Páreo opens on the last period, does not autoplay and, if someone presses play, steps from period to period without interpolation or sliding bars. The component also starts playing only when it appears on screen and stops when it leaves.
