React bump strip chart — rank trajectory over time — #1 on top, gaps for unranked periods. Tiny accessible SVG microchart; RSC-safe static or /interactive.

BumpStrip answers "where do we rank, and which way is it moving?" — position on an inverted ordinal scale, so #1 sits on top and climbing draws upward. Ranks are not values: Sparkline would lie about the distance between #2 and #3.

BumpStrip

interactive · 4.57 kB · static · 2.2 kB

Install

Import & usereact/bump-strip

import { BumpStrip } from "@microcharts/react/bump-strip";// weeklyRanks — real values under “Sample data” below<BumpStrip data={weeklyRanks} title="Category rank" />

Sample data

const weeklyRanks = [5, 5, 4, 4, 4, 3, 2, 2, 3, 2, 1, 1]; // #5 -> #1 over 12 weeks

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — leaderboard rows, category-rank trends in KPI cards.
Avoid for — continuous values (Sparkline), or more than ~15 rank levels.

Sizing

Variants

unranked gaps

shared scale for small multiples

Edge cases

single ranked period

all unranked

flat run

A single ranked period draws its two end labels with no visible line — there is no trajectory to show yet. An all-null series renders the frame with neither line nor labels; the accessible name reports it directly rather than describing a blank chart. A flat run (rank never changes) draws a level line with zero change dots, since dots="changes" only marks the periods where rank actually moved.

Four homes

Why this default

Change dots mark only the periods where rank actually moved — flat runs stay quiet, so the eye lands on the transitions. End labels ("#5" → "#1") anchor the ordinal read without an axis.

Accessibility

The accessible name is the full trajectory — "From #8 to #1 over 12 weeks; best #1." The interactive entry steps the periods ("Week 7 of 12: #2.").

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Prop	Type	Notes
data*	(number \| null)[]	1-based integer ranks; null = unranked period (gap).
maxRank	number	Fix the band so small multiples share a rank scale.
dots	"changes" \| "none"	Mark the moments rank actually moved.
label	"ends" \| "last" \| "none"	"#5" → "#1" endpoint labels.
animate	boolean	interactiveOpt-in entrance motion when the chart mounts client-side — add `import "@microcharts/react/motion"` once. Inert on the server, on hydrated server HTML, and under `prefers-reduced-motion`.

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.