Race bar chartPro

• Telling how a ranking changed over time: market share by year, top products by week.
• Presentations and landing pages where the motion is the story.

• Reading exact values at a moment: use a bar chart with a period picker.
• Trends of one or two series: use a line chart.

Import it from @/components/ui/race-bar-chart after installing.

import { RaceBarChart } from "@/components/ui/race-bar-chart";

const frames = [
  { label: "2024", values: { Search: 420, Social: 180, Direct: 260 } },
  { label: "2025", values: { Search: 460, Social: 340, Direct: 280 } },
  { label: "2026", values: { Search: 480, Social: 520, Direct: 300 } },
];

export function Race() {
  return <RaceBarChart frames={frames} top={5} />;
}

• Bars are a list; the current period is announced politely as it changes.
• The slider has the period as its value text.

• Values ease between frames and rows slide to their new rank.
• With reduced motion nothing autoplays and rows jump instead of sliding.

• Name column shrinks on narrow screens; bars fill the rest.

• One animation frame loop while playing, stopped when paused or finished.

• Every frame should list the same names; a missing name counts as 0.
• Keep frames to a few dozen; tweening makes them feel continuous.