Bump Chart

Preview in your theme

status="ready" — 6 storefronts over 8 months, positions derived from the order counts (highest wins). Proseware only trades in Mar and Apr, so its line starts at Mar, stops after Apr and is drawn nowhere else. Hover the plot for the standings at that month with the move since the previous one; hover or focus a legend chip to highlight one line, click to pin it.

Storefronts by weekly orders

Off the board for part of the range: Proseware. A broken line means not ranked that period — not last place.

Bump chart. Storefronts by weekly orders: 6 entities ranked across 8 periods, Jan to Aug. Position 1 is the top row. At Aug: 1. Contoso, 2. Fabrikam, 3. Northwind, 4. Adventure Works, 5. Litware. Biggest move: Northwind from position 1 to 3. 1 entity is off the board for part of the range. Every position follows in the data table.
Period	Northwind	Contoso	Fabrikam	Litware	Adventure Works	Proseware
Jan	position 1, 4,614 orders	position 2, 4,344 orders	position 3, 3,991 orders	position 4, 3,572 orders	position 5, 3,125 orders	not ranked
Feb	position 1, 4,584 orders	position 2, 4,520 orders	position 3, 3,922 orders	position 4, 3,442 orders	position 5, 3,296 orders	not ranked
Mar	position 2, 4,505 orders	position 1, 4,578 orders	position 4, 3,914 orders	position 5, 3,330 orders	position 6, 3,313 orders	position 3, 4,208 orders
Apr	position 2, 4,482 orders	position 1, 4,712 orders	position 4, 4,075 orders	position 5, 3,384 orders	position 6, 3,369 orders	position 3, 4,333 orders
May	position 2, 4,256 orders	position 1, 4,921 orders	position 3, 4,063 orders	position 5, 3,232 orders	position 4, 3,500 orders	not ranked
Jun	position 3, 4,011 orders	position 1, 5,068 orders	position 2, 4,047 orders	position 5, 3,095 orders	position 4, 3,513 orders	not ranked
Jul	position 3, 3,968 orders	position 1, 5,114 orders	position 2, 4,068 orders	position 5, 3,075 orders	position 4, 3,531 orders	not ranked
Aug	position 3, 3,705 orders	position 1, 5,199 orders	position 2, 4,198 orders	position 5, 2,975 orders	position 4, 3,547 orders	not ranked

status="empty" — no period has been ranked yet

Storefronts by weekly orders

No standings yet

Positions appear here once at least one period has been ranked.

status="loading" — skeleton keeps the header and the 280px plot silhouette

Storefronts by weekly orders

status="error" + onRetry — the retry button only renders when onRetry is passed

Storefronts by weekly orders

Couldn't load this chart

The data source didn't respond.

Ties, competition ranking — Contoso and Fabrikam both post 1,200 in Feb, so both sit on row 2 and the next distinct score takes row 4. Row 3 is left empty on purpose: a position always means "one more than the number of storefronts strictly ahead".

Storefronts by weekly orders

Bump chart. Storefronts by weekly orders: 4 entities ranked across 4 periods, Jan to Apr. Position 1 is the top row. At Apr: 1. Adventure Works, 2. Northwind, 3. Contoso, 4. Fabrikam. Biggest move: Adventure Works from position 4 to 1. Every position follows in the data table.
Period	Northwind	Contoso	Fabrikam	Adventure Works
Jan	position 1, 1,350 orders	position 2, 1,290 orders	position 3, 1,240 orders	position 4, 1,180 orders
Feb	position 1, 1,310 orders	position 2, 1,200 orders	position 2, 1,200 orders	position 4, 1,040 orders
Mar	position 1, 1,290 orders	position 4, 1,180 orders	position 2, 1,260 orders	position 3, 1,210 orders
Apr	position 2, 1,270 orders	position 3, 1,210 orders	position 4, 1,150 orders	position 1, 1,330 orders

Caller-supplied positions — a keyword tracker knows the search position but not the scores behind it, so every point carries rank and no value. The scale spans the positions that actually occur (4–12), and "returns policy" leaves the tracked window in W4, which breaks its line instead of pinning it to position 12.

Keyword positions in organic search

Off the board for part of the range: returns policy. A broken line means not ranked that period — not last place.

Bump chart. Keyword positions in organic search: 3 entities ranked across 6 periods, W1 to W6. Position 1 is the top row. At W6: 4. checkout flow, 9. gift card, 12. returns policy. Biggest move: checkout flow from position 12 to 4. 1 entity is off the board for part of the range. Every position follows in the data table.
Period	checkout flow	gift card	returns policy
W1	position 12	position 4	position 7
W2	position 11	position 5	position 7
W3	position 9	position 5	position 8
W4	position 7	position 6	not ranked
W5	position 6	position 8	position 11
W6	position 4	position 9	position 12

The 10-entity cap — colour cycles the five chart tokens and the dash pattern advances once they are used up, so no two lines share both channels; the legend swatch carries the same pair.

Storefronts by weekly orders

Off the board for part of the range: Proseware. A broken line means not ranked that period — not last place.

Bump chart. Storefronts by weekly orders: 10 entities ranked across 8 periods, Jan to Aug. Position 1 is the top row. At Aug: 1. Contoso, 2. Fabrikam, 3. Northwind, 4. Adventure Works, 5. Tailspin, 6. Litware, 7. Wide World, 8. Wingtip Toys, 9. Lucerne. Biggest move: Northwind from position 1 to 3. 1 entity is off the board for part of the range. Every position follows in the data table.
Period	Northwind	Contoso	Fabrikam	Litware	Adventure Works	Proseware	Tailspin	Wingtip Toys	Wide World	Lucerne
Jan	position 1, 4,614 orders	position 2, 4,344 orders	position 3, 3,991 orders	position 4, 3,572 orders	position 5, 3,125 orders	not ranked	position 6, 2,758 orders	position 7, 2,412 orders	position 8, 2,323 orders	position 9, 1,994 orders
Feb	position 1, 4,584 orders	position 2, 4,520 orders	position 3, 3,922 orders	position 4, 3,442 orders	position 5, 3,296 orders	not ranked	position 6, 2,847 orders	position 8, 2,296 orders	position 7, 2,372 orders	position 9, 1,941 orders
Mar	position 2, 4,505 orders	position 1, 4,578 orders	position 4, 3,914 orders	position 5, 3,330 orders	position 6, 3,313 orders	position 3, 4,208 orders	position 7, 2,886 orders	position 9, 2,324 orders	position 8, 2,456 orders	position 10, 1,880 orders
Apr	position 2, 4,482 orders	position 1, 4,712 orders	position 4, 4,075 orders	position 5, 3,384 orders	position 6, 3,369 orders	position 3, 4,333 orders	position 7, 2,924 orders	position 9, 2,247 orders	position 8, 2,517 orders	position 10, 1,789 orders
May	position 2, 4,256 orders	position 1, 4,921 orders	position 3, 4,063 orders	position 5, 3,232 orders	position 4, 3,500 orders	not ranked	position 6, 2,885 orders	position 8, 2,178 orders	position 7, 2,681 orders	position 9, 1,656 orders
Jun	position 3, 4,011 orders	position 1, 5,068 orders	position 2, 4,047 orders	position 5, 3,095 orders	position 4, 3,513 orders	not ranked	position 6, 2,996 orders	position 8, 2,204 orders	position 7, 2,835 orders	position 9, 1,442 orders
Jul	position 3, 3,968 orders	position 1, 5,114 orders	position 2, 4,068 orders	position 6, 3,075 orders	position 4, 3,531 orders	not ranked	position 5, 3,143 orders	position 8, 2,260 orders	position 7, 2,794 orders	position 9, 1,226 orders
Aug	position 3, 3,705 orders	position 1, 5,199 orders	position 2, 4,198 orders	position 6, 2,975 orders	position 4, 3,547 orders	not ranked	position 5, 3,209 orders	position 8, 2,285 orders	position 7, 2,817 orders	position 9, 1,204 orders

Loading preview…

"use client"

import * as React from "react"
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"

import { type ChartConfig, ChartContainer, ChartTooltip } from "@/components/ui/chart"
import { cn } from "@/lib/utils"
import { useResizeObserver } from "@/registry/hooks/use-resize-observer"
import { type ChartBumpData, type ChartBumpPoint, isRankedPoint } from "./chart-bump.contract"

export interface ChartBumpProps extends ChartBumpData {
  /** number → text for the tooltip and the data table (the axis shows positions, not scores) */
  formatValue?: (value: number) => string
  onRetry?: () => void

Installation

npx shadcn@latest add https://ui.zyeon.ai/r/chart-bump.json

Prompt

Build a React + TypeScript + Tailwind "ChartBump" dashboard card on the shadcn
chart primitives (ChartContainer/ChartTooltip over recharts) with zod.

Contract
- A zod schema is the single source of truth:
  { status: "loading" | "empty" | "error" | "ready"; title: string;
    unit?: string; order?: "desc" | "asc";
    series: { key, label,
              points: { x: string, value: number | null,
                        rank?: number | null }[] }[] }
- x is a period label rendered as-is, so the caller keeps control of
  granularity (months, ISO weeks, season numbers).
- An entity is *on the board* for a period when that point carries a finite
  rank or a finite value. Anything else means "not ranked this period" — it is
  not zero and not last place.
- `value` is the score positions are derived from; `rank` is the escape hatch
  for callers whose source already knows the position (server ORDER BY, an
  official standings feed, a SERP tracker that never sees the scores).
- Refinements: every entity carries the same x sequence point for point
  (positions are computed across all entities per period, so they must share
  one grid); and within a period, either every ranked point carries an
  explicit rank or none does — mixing them lets a caller's 2 and a derived 2
  land on the same row for unrelated reasons.
- Cap the board at 10 entities: five chart tokens x two dash patterns is how
  many distinct visual identities exist.
- Component props = z.infer of the schema, plus formatValue?, onRetry? and
  className. No hand-written parallel interface.

Behavior
- Per period, resolve one position per entity. Ties use COMPETITION ranking
  (1, 2, 2, 4): tied entities share the better row and the next distinct score
  skips the rows the tie consumed, so a position always reads as "one more
  than the number of entities strictly ahead of me" — the rule sport
  standings and SQL RANK() use. Dense ranking (1, 2, 2, 3) answers a
  different question and silently shortens the board on every draw, so the
  same row means different things in different periods. Document the choice;
  callers who need the other policy supply `rank` themselves.
- order: "desc" (default) means the highest score is position 1; "asc" is for
  metrics where lower wins (lap time, error rate, price).
- The y scale is REVERSED and ordinal: domain is [min occupied position, max
  occupied position], ticks are the positions that actually occur, so it can
  never print a "1.5th place" and a sliced board (#4..#12) does not waste rows
  1-3. Thin the ticks by pixel distance, not by every n-th entry — the rows
  are a linear scale, so an every-other rule on a sparse set still lets two
  ticks land 3px apart. Inset the scale a few px at both ends so row 1's
  stroke is not drawn on the frame.
- Absence: connectNulls={false} and a dot renderer that draws nothing when the
  point has no y. An entity that enters in period 3 and leaves after period 4
  therefore gets one subpath spanning exactly those two periods, and one that
  drops out mid-range and returns gets two. Carrying the last known position
  forward instead would invent standings for every period the source never
  reported.
- Edge labels: name the entities holding each row in the first and the last
  period, grouped BY ROW rather than per entity, so a tie at an edge shares a
  single box instead of two boxes drawn on top of each other. Render them as
  axis ticks (one label per row) inside a foreignObject with CSS truncate, so
  the browser measures the glyphs; a hand-rolled width estimator is wrong by
  ~30% in both directions on caps and digits.
- Narrow cards: keep the trailing names at every width (the current standings
  are what the chart is usually opened for) and drop the leading names below
  ~520px, falling back to the position numbers alone. Drop both when the row
  pitch is smaller than a label box. Every entity is still named in the
  legend, the tooltip and the data table.
- Tooltip: hovering any period reads out the whole standings for it in
  position order — row number, swatch, name, the move since the previous
  period (up/down/level/new as glyph + count) and the score. Entities off the
  board are listed last as "not ranked" rather than dropped, because that is
  the reading a broken line is showing.
- Highlight: legend chips are real buttons. Hover or focus lifts one line
  (the rest drop to strokeOpacity 0.25 and its own stroke thickens), click
  pins it (aria-pressed), clicking again unpins. The effective key is
  hovered ?? pinned, re-derived against the current series every render, so a
  key left over from a previous payload simply stops matching.
- Four first-class state branches inside one bg-card panel: loading
  (aria-hidden skeleton of crossing polylines at the real plot height), empty
  (two crossing outlines + copy; a ready payload with nothing plottable lands
  here too), error (message + a retry button only when onRetry exists), ready.

Rendering & styling
- Colours come only from the chart tokens. Identity is a PAIR: colour cycles
  var(--chart-{(i % 5) + 1}) and the dash pattern advances only once the five
  colours are used up (index 5 restarts chart-1 with a dash). Ten entities
  therefore get ten different (colour, dash) identities, and the same pair is
  repeated in the legend swatch, the tooltip swatch and the edge label — a
  bump chart's neighbouring lines sit ~1.3:1 apart in a five-hue palette, so
  colour can never be the only channel.
- Accessibility: the plot is role="img" with a generated aria-label (title,
  entity and period counts, the span, the final standings, the biggest move,
  how many entities are off the board for part of it). recharts'
  accessibilityLayer is switched off so no focusable svg sits inside that
  children-presentational subtree, and the exact positions live in a sibling
  data table hidden by an sr-only *wrapper div* — a bare sr-only table keeps
  auto table layout, ignores width:1px and drags the page into horizontal
  scroll on a phone.
- recharts only lays a cartesian axis out when a series is bound to it, so the
  trailing edge needs one invisible line (no stroke, no dots, no legend entry)
  bound to that axis id.
- Animation: the draw-in runs unless prefers-reduced-motion is set, read
  through useSyncExternalStore over matchMedia with a false server snapshot —
  recharts animates in JS, so motion-reduce: classes cannot reach it.
- Panel: rounded-xl border bg-card, tabular-nums for every number, cn() merges
  className. Card width comes from a ResizeObserver on the card itself, not
  from the viewport, so the chart is right in a sidebar as well as full-bleed.

Customization levers
- Entity count: 2-10. Past 10, split the board or make the tail toggleable
  rather than reusing a (colour, dash) pair.
- Tie policy: swap competition ranking for dense ranking in one comparator, or
  push the decision to the caller by always supplying `rank`.
- Curve: type="monotone" gives the classic bump S-curve between rows;
  "linear" if you would rather not imply anything between two periods.
- Density: a 280px plot with p-6 suits a dashboard grid; ~200px with p-4 for a
  compact card. Drop CartesianGrid for a cleaner sheet, or add vertical grid
  lines when periods matter as much as rows.
- Edge labels: the leading-edge breakpoint, the label width band and the
  "drop when the rows get too tight" threshold are three constants; raise the
  width band for long entity names, or turn the leading edge off entirely and
  let the legend carry identity.
- Movement glyphs: the tooltip's up/down/level/new markers are text, so they
  survive a monochrome print; swap them for lucide icons if the host UI
  already uses them.
- Palette: replace the colour formula to pin a fixed token per key (us vs
  everyone else); keep the dash channel whatever you do.

Concepts

Position, not value — the y axis is an ordinal scale of rows, reversed so that position 1 sits at the top and drawn only on the positions that actually occur. That is the whole difference from a line chart: a bump chart throws the magnitudes away on purpose, because the question is who is ahead, not by how much. The magnitudes come back in the tooltip and the data table.
Competition ranking — a draw puts both entities on the better row and the next distinct score skips the rows the tie consumed (1, 2, 2, 4). It keeps a row meaning the same thing in every period: "one more than the number of entities strictly ahead". Dense ranking would compress the board on every draw, so row 3 would mean different things in different columns.
Absence is a break, not a position — an entity that is not on the board has no row, so its line stops and starts again. Continuing it at the last known position is the characteristic bump-chart lie: it draws a standing the source never reported, and the reader has no way to tell it apart from a real result.
Edge labelling — the standings at the first and last period are written into the margins, one label per row, so a reader can name a line without walking back to a legend; a tie at an edge collapses into one shared box instead of two overlapping ones. On a narrow card only the trailing edge survives, because "where does this end up" outranks "where did it start".
Redundant identity — every entity owns a chart token and a dash pattern, and the pair only repeats after 25 combinations, so ten crossing lines stay separable in greyscale, under a colour-vision deficiency, or in a palette whose neighbouring hues are a step apart.
Graphic plus data table — the plot is one labelled role="img" graphic with no focus stops inside it, and every position is repeated in a visually hidden table, so assistive tech gets the summary and the exact standings instead of a pile of path elements.

Storefronts by weekly orders

Storefronts by weekly orders

Storefronts by weekly orders

Storefronts by weekly orders

Storefronts by weekly orders

Keyword positions in organic search

Storefronts by weekly orders

Installation

Prompt

Concepts

On This Page

Storefronts by weekly orders

Storefronts by weekly orders

Storefronts by weekly orders

Storefronts by weekly orders

Storefronts by weekly orders

Keyword positions in organic search

Storefronts by weekly orders