Ranking lines over time drawn as smooth S-curves; hovering or focusing a series highlights it, dims the rest and shows rank changes.
chartbumprankingleaderboardlinessvg
Installation
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/bump-chart
Usage
usage.tsx
1import { BumpChart } from "@/components/charts/bump-chart";
2
3<BumpChart
4 periods={["Q1", "Q2", "Q3"]}
5 series={[
6 { id: "a", label: "Search", ranks: [1, 2, 2] },
7 { id: "b", label: "Social", ranks: [2, 1, 3] },
8 { id: "c", label: "Email", ranks: [3, 3, 1] },
9 ]}
10/>
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.