Bump Rank Chart: React + Tailwind Component

Multi-period rank line chart: curve stroke-drawing animation, with hover highlighting a single entry's path.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/bump-rank-chart.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Chart heightheight

340

Line weightstrokeWidth

Stroke duration (s)duration

0.9

Stagger (s)stagger

0.18

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<BumpRankChart/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/bump-rank-chart.en.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, `Question N Period` is generated — meaning "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-label announces the entry name and its rank in every period in full, and aria-pressed reflects 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 use tabular-nums for alignment

Bump Rank Chart