Basic Bump Chart — Apache ECharts

A bump chart visualizes how rankings change over time by plotting rank positions and connecting them with lines. Unlike line charts that show values, bump charts focus specifically on ordinal rankings, making it easy to track position changes, overtakes, and rank stability across time periods.

Basic Bump Chart rendered with Apache ECharts

Renders

JavaScript source (Apache ECharts)

// anyplot.ai
// bump-basic: Basic Bump Chart
// Library: echarts 6.1.0 | JavaScript 22.23.2
// Quality: 91/100 | Created: 2026-08-24

const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic) ----------------------------------------
// Fictional racing championship: rank (1 = best) per team across 8 races.
// Each race column is a valid permutation of 1..8 — no ties.
const races = [
  "Race 1", "Race 2", "Race 3", "Race 4",
  "Race 5", "Race 6", "Race 7", "Race 8",
];

const teams = [
  { name: "Nova Racing", ranks: [3, 2, 1, 1, 1, 1, 1, 1] },
  { name: "Apex Motors", ranks: [5, 4, 3, 2, 2, 2, 2, 2] },
  { name: "Ironclad Racing", ranks: [8, 7, 6, 5, 4, 3, 3, 3] },
  { name: "Vector GP", ranks: [1, 1, 2, 3, 3, 4, 4, 4] },
  { name: "Vertex Motorsport", ranks: [6, 6, 7, 7, 8, 6, 5, 5] },
  { name: "Solstice Team", ranks: [7, 8, 8, 8, 7, 8, 7, 6] },
  { name: "Meridian F1", ranks: [4, 5, 5, 4, 5, 5, 6, 7] },
  { name: "Skyline Racing", ranks: [2, 3, 4, 6, 6, 7, 8, 8] },
];

// --- Init --------------------------------------------------------------------
const chart = echarts.init(document.getElementById("container"));

// --- Option --------------------------------------------------------------------
chart.setOption({
  animation: false,
  color: t.palette,
  backgroundColor: "transparent",
  title: {
    text: "bump-basic · javascript · echarts · anyplot.ai",
    left: "center",
    textStyle: { color: t.ink, fontSize: 22 },
  },
  tooltip: { trigger: "axis" },
  grid: { left: 70, right: 190, top: 100, bottom: 80, containLabel: true },
  xAxis: {
    type: "category",
    data: races,
    boundaryGap: false,
    axisLabel: { color: t.inkSoft, fontSize: 14 },
    axisLine: { lineStyle: { color: t.inkSoft } },
    splitLine: { show: false },
  },
  yAxis: {
    type: "value",
    inverse: true,
    min: 1,
    max: teams.length,
    interval: 1,
    name: "Rank (1 = best)",
    nameLocation: "middle",
    nameGap: 46,
    nameTextStyle: { color: t.ink, fontSize: 16 },
    axisLabel: { color: t.inkSoft, fontSize: 14 },
    axisLine: { lineStyle: { color: t.inkSoft } },
    splitLine: { lineStyle: { color: t.grid } },
  },
  series: teams.map((team, i) => {
    // Nova Racing (index 0) is the eventual champion: rank 1 from Race 3 onward.
    const isChampion = i === 0;
    return {
      name: team.name,
      type: "line",
      data: team.ranks,
      color: t.palette[i],
      symbol: isChampion ? "diamond" : "circle",
      symbolSize: isChampion ? 20 : 16,
      lineStyle: { width: isChampion ? 5 : 3.5 },
      itemStyle: { color: t.palette[i] },
      emphasis: { focus: "series" },
      endLabel: {
        show: true,
        formatter: "{a}",
        color: t.ink,
        fontSize: 14,
        fontWeight: isChampion ? "bold" : "normal",
        distance: 12,
      },
    };
  }),
});

Part of Basic Bump Chart on anyplot.ai.

Other implementations