# Rank Flow Chart

> Ranking lines over time drawn as smooth S-curves; hovering or focusing a series highlights it, dims the rest and shows rank changes.

- Collection: Charts
- Tier: pro
- Docs: https://geturui.com/docs/bump-chart
- Install: `npx shadcn@latest add @geturui-pro/bump-chart`
- Dependencies: motion

## Usage

```tsx
import { BumpChart } from "@/components/charts/bump-chart";

<BumpChart
  periods={["Q1", "Q2", "Q3"]}
  series={[
    { id: "a", label: "Search", ranks: [1, 2, 2] },
    { id: "b", label: "Social", ranks: [2, 1, 3] },
    { id: "c", label: "Email", ranks: [3, 3, 1] },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| periods | `string[]` | — | X-axis labels. |
| series | `{ id: string; label: string; ranks: number[]; color?: string }[]` | — | Rank per period (1 = top). |
| rowHeight | `number` | 40 | Vertical space per rank. |
| title | `string` | — | Caption and accessible name. |

## Accessibility

- End labels are focusable, labelled with every rank; Up/Down jump between series, Left/Right step through periods.
- Rank numbers are printed in each point, so colour is never the only cue.
- Legend buttons toggle series with aria-pressed.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.