Bump chart

Market share rank
Period	Atlas rank	Harbour rank	Wayfinder rank
Q1	1	2	3
Q2	2	1	3
Q3	1	2	3
Q4	1	3	2

When to use #

Use it for

Leaderboards and market share over time.
Showing order, not magnitude.

Skip it when

Values matter more than rank.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/bump-chart.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { BumpChart } from "@/components/ui/bump-chart"

export function QuarterlyRanks() {
  return (
    <div className="w-full max-w-xl">
      <BumpChart
        label="Market share rank"
        periods={["Q1", "Q2", "Q3", "Q4"]}
        data={[
          { id: "atlas", label: "Atlas", values: [90, 80, 85, 95] },
          { id: "harbour", label: "Harbour", values: [70, 85, 80, 70] },
          { id: "wayfinder", label: "Wayfinder", values: [60, 60, 70, 75] },
        ]}
      />
    </div>
  );
}

API reference #

BumpChart

component

PropTypeDefault

label *string—

periods *readonly string[]—

data *readonly BumpSeries[]—

unitstring""

formatValue((value: number) => string)numberText

loadingboolean—

errorstring—

classNamestring—

It exposes group and status semantics, with aria-label, aria-busy, aria-hidden and aria-pressed kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour

←Moves to the previous item or value.

→Moves to the next item or value.

EscapeCloses or cancels, then returns focus to where it came from.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.