Trend · Intermediate

Bump chart

Rank changes over time.

Use when: What matters is the rank, as in App Store rankings
Avoid when: The value gaps between ranks matter

Try it

Reduce motion

Bump chart

Monthly App Store rank

Bump chart data
Jan	#1 App A, #2 App B, #3 App C, #4 App D, #5 Our app, #6 App E
Feb	#1 App A, #2 App C, #3 App B, #4 Our app, #5 App D, #6 App E
Mar	#1 App B, #2 App A, #3 App C, #4 Our app, #5 App E, #6 App D
Apr	#1 App B, #2 App A, #3 Our app, #4 App C, #5 App D, #6 App E
May	#1 App B, #2 Our app, #3 App A, #4 App C, #5 App D, #6 App E
Jun	#1 App B, #2 Our app, #3 App A, #4 App D, #5 App C, #6 App E
Jul	#1 Our app, #2 App B, #3 App A, #4 App D, #5 App C, #6 App E

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Code

BumpChart.tsx

import { ChartCard, BumpChart } from "ztd-charts";

const data = [
  {"month":"Jan","app":"Our app","rank":5},
  {"month":"Feb","app":"Our app","rank":4},
  {"month":"Mar","app":"Our app","rank":4},
  {"month":"Apr","app":"Our app","rank":3},
  {"month":"May","app":"Our app","rank":2},
  {"month":"Jun","app":"Our app","rank":2},
  // … 36 more rows
];

export function Example() {
  return (
    <ChartCard number="29" title="Bump chart" subtitle="Monthly App Store rank" takeaway="From 5th to 1st" level="intermediate" replay>
      <BumpChart
        data={data}
        x="month"
        series="app"
        rank="rank"
      />
    </ChartCard>
  );
}

Props

<BumpChart> takes these props. Rows marked Common work the same on every chart.

26 props

Prop	Type	Default	Description
`data`RequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]	object[]	-	An array of objects. Pass CSV, REST or database rows as they are
`x`RequiredPeriod fieldstring \| (d, i) => any	string \| (d, i) => any	-	Period field
`series`RequiredItem fieldstring \| (d, i) => string	string \| (d, i) => string	-	Item field
`rank`Rank field (1 is first)string \| (d, i) => number	string \| (d, i) => number	-	Rank field (1 is first)
`value`Value field (instead of rank, largest is first)string \| (d, i) => number	string \| (d, i) => number	-	Value field (instead of rank, largest is first)
`height`CommonHeight in px. Without it, each chart picks a default that fits its widthnumber	number	-	Height in px. Without it, each chart picks a default that fits its width
`width`CommonFixed width in px. Without it, the chart fits its parentnumber	number	-	Fixed width in px. Without it, the chart fits its parent
`highlight`CommonItem to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"number \| string \| (number\|string)[] \| "max" …	number \| string \| (number\|string)[] \| "max" …	-	Item to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"
`format`CommonValue format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options"number" \| "percent" \| "compact" \| …	"number" \| "percent" \| "compact" \| …	-	Value format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options
`unit`CommonUnit appended to values. For example "%" or "ms"string	string	-	Unit appended to values. For example "%" or "ms"
`locale`CommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault `"en-US"`	string	"en-US"	Locale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider locale
`animate`CommonEntry and update animationbooleanDefault `true`	boolean	true	Entry and update animation
`duration`CommonAnimation length (ms)number	number	-	Animation length (ms)
`easing`CommonMotion curve"spring" \| "easeOut" \| "easeInOut" \| "linear"Default `"spring"`	"spring" \| "easeOut" \| "easeInOut" \| "linear"	"spring"	Motion curve
`stagger`CommonDelay between items as they enter (ms)number	number	-	Delay between items as they enter (ms)
`reducedMotion`Common"auto" follows the OS setting. true always turns motion offanyDefault `"auto"`	any	"auto"	"auto" follows the OS setting. true always turns motion off
`animateOnView`CommonPlay when the chart scrolls into viewbooleanDefault `true`	boolean	true	Play when the chart scrolls into view
`showLabels`CommonLabels drawn on the chart (values and names)booleanDefault `true`	boolean	true	Labels drawn on the chart (values and names)
`tooltip`CommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault `true`	tooltip	true	Show tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left out
`syncId`CommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring	string	-	Charts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside it
`ariaLabel`CommonName for screen readersstring	string	-	Name for screen readers
`description`CommonDescription for screen readers. Built from the data when omittedstring	string	-	Description for screen readers. Built from the data when omitted
`onHover`CommonRuns when hover or keyboard focus moves to another item(e: ChartEvent \| null) => void	(e: ChartEvent \| null) => void	-	Runs when hover or keyboard focus moves to another item
`onClick`CommonRuns on click, Enter or Space(e: ChartEvent) => void	(e: ChartEvent) => void	-	Runs on click, Enter or Space
`replayKey`CommonReplays the entry animation when it changesstring \| number	string \| number	-	Replays the entry animation when it changes
`theme`CommonChanges theme tokens for this chart onlyPartial<ChartTheme>	Partial<ChartTheme>	-	Changes theme tokens for this chart only

Try it

Code

Props

Also in Trend