Bump Rank Chart
Multi-period rank line chart: curve stroke-drawing animation, with hover highlighting a single entry's path.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
An SVG bump chart: periods run along the X axis and ranks down the Y axis, with each entry threading its ranks across the periods on one smooth curve that grows in by stroke drawing in sequence on reveal. Hovering or clicking an entry thickens and highlights its line while the rest fade back, and a rank badge floats out at each period's node — well suited to telling the story of a leaderboard rising and falling over time.
npx shadcn@latest add "https://webberui.com/r/bump-rank-chart.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<BumpRankChart />
Installation
npx shadcn@latest add "https://webberui.com/r/bump-rank-chart.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/bump-rank-chart.
Usage
import { BumpRankChart } from "@/components/ui/bump-rank-chart";
<BumpRankChart
periods={["Q1", "Q2", "Q3", "Q4"]}
entries={[
{ label: "50 Lan", ranks: [1, 2, 2, 1], hue: 152 },
{ label: "KEBUKE", ranks: [3, 1, 1, 2], hue: 25 },
{ label: "Milksha", ranks: [2, 3, 4, 3], hue: 210 },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
entries | BumpRankEntry[] | — | The list of entries, each { label, ranks, hue }: the name, its rank in each period (1 is first place), and an HSL hue |
periods | string[] | generated automatically | X axis period labels; when omitted, 第 N 期 is generated — Traditional Chinese for "period N", so pass this prop to localize it |
height | number | 340 | SVG viewBox height, controlling the chart's vertical proportions |
strokeWidth | number | 3 | Line thickness (px), thickened automatically when highlighted |
duration | number | 0.9 | How long a single line takes to grow in by stroke drawing (seconds) |
stagger | number | 0.18 | Interval between units as the lines reveal in sequence (seconds) |
className | string | — | Forwarded to the outer container |
Accessibility
- Each line is covered by an invisible widened hit area (
role="button", Tab focusable); focusing it highlights that entry's path, and Enter or Space pins / unpins it - The hit area's
aria-labelannounces the entry name and its rank in every period in full, andaria-pressedreflects the pinned state - When the user has "reduce motion" enabled at the system level, the stroke growth and the node reveal animations are skipped and the complete curves are shown directly
- The SVG carries
role="group"and an overall description (the entry count and the period count), and the interactive hit areas remain in the accessibility tree; the rank numbers usetabular-numsfor alignment