# Race bar chart

A ranking over time: bars overtake each other on springs, values count up, and a timeline you can play or scrub.

- ID: `race-bar-chart`
- Import: `animui/race-bar-chart`
- Category: Data
- Runtime exports: `RaceBarChart`
- Declaration: `types/pro/race-bar-chart.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: bar-chart, line-chart, streamgraph, slope-chart

```tsx
import { RaceBarChart } from 'animui/race-bar-chart';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info race-bar-chart` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface RaceBarChartProps {
  items: { id: string; label: string; group?: string }[];
  frames: { period: string; values: Record<string, number> }[];
  label: string;
  groups?: { id: string; label: string }[];
  formatValue?: (value: number) => string;
  formatTick?: (value: number) => string;
  bars?: number;
  frame?: number;
  defaultFrame?: number;
  onFrameChange?: (index: number) => void;
  playing?: boolean;
  defaultPlaying?: boolean;
  onPlayingChange?: (playing: boolean) => void;
  autoPlay?: boolean;
  frameDuration?: number;
  loop?: boolean;
  highlight?: string;
  className?: string;
}

export declare const RaceBarChart: ComponentType<RaceBarChartProps>;

export default RaceBarChart;
```