BumpStrip
Rank over time on an inverted ordinal scale, banded to the ranks held, with gaps for unranked periods.
- encodes
- vertical position on an inverted rank scale (best rank on top)
- precision
- medium — end labels give the exact ranks; steps are ordinal
- nodes
- ≤ 10 (1 path + change dots + 2 end labels)
- collection
- Core
BumpStrip plots one entrant's rank over a run of periods on an inverted ordinal scale, so climbing draws upward. The
band is the range of ranks the series holds: a run between #4 and #7 fills the box, and #1 sits on top when the series
gets there. 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. Set maxRank to fix the band at #1 through that rank, which is what
small multiples need to be read against each other.
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
- hover · rove · click…
Hover or arrow through the weeks — each announces the rank held that period.
import { BumpStrip } from "@microcharts/react/bump-strip/interactive";// weeklyRanks — real values under “Sample data” below<BumpStrip data={weeklyRanks}/>Sample data
const weeklyRanks = [5, 5, 4, 4, 4, 3, 2, 2, 3, 2, 1, 1]; // #5 -> #1 over 12 weeksWhen 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
Our blend's Coffee bestseller rank — from #5 to #1 in twelve weeks.
| Our Blend | |
| Sunrise Roast | |
| Cloud Nine |
Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.
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, press Escape, or
press outside the chart. 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 at #1 through this rank, so small multiples share a 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.