BumpStrip
Rank over time on an inverted ordinal scale, with #1 on top and gaps for unranked periods.
- encodes
- vertical position on an inverted rank scale (#1 on top)
- precision
- medium — end labels give the exact ranks; steps are ordinal
- nodes
- ≤ 10 (1 path + change dots + 2 end labels)
BumpStrip plots one entrant's rank over a run of periods on an inverted ordinal scale, so #1 sits on top and climbing draws upward. Ranks are not values: a Sparkline would treat the gap between #2 and #3 as a real distance. End labels ("#5" → "#1") anchor the ordinal read without an axis, and change dots mark only the periods where rank moved, so flat runs stay quiet and the eye lands on the transitions.
Install
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 weeksTry it
When to use it
Use it for leaderboard rows and category-rank trends in KPI cards. For continuous values use Sparkline, and keep it under about 15 rank levels.
Sizing
Variants
Edge cases
A single ranked period draws its two end labels with no visible line, because there is no trajectory yet. An all-null
series renders the frame with neither line nor labels, and the accessible name reports that directly. A flat run draws a
level line with zero change dots, because dots="changes" marks only the periods where rank moved.
Four homes
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.