Basic Bump Chart in Apache ECharts (JavaScript)

The same plot in 14 other libraries — JavaScript: Chart.js, D3.js, Highcharts, MUI X Charts; Python: Altair, Bokeh, lets-plot, Matplotlib, Plotly, plotnine, Pygal, Seaborn; R: ggplot2; Julia: Makie.jl. Compare all 15 side by side: Basic Bump Chart in Python, R, Julia and JavaScript.

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,
      },
    };
  }),
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/bump-basic/echarts/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.

{
  "spec_id": "bump-basic",
  "language": "javascript",
  "library": "echarts",
  "page": "https://anyplot.ai/bump-basic/javascript/echarts",
  "hub": "https://anyplot.ai/bump-basic",
  "code_json": "https://api.anyplot.ai/specs/bump-basic/echarts/code",
  "spec_json": "https://api.anyplot.ai/specs/bump-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/bump-basic/javascript/echarts/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/bump-basic/javascript/echarts/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/bump-basic/javascript/echarts/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/bump-basic/javascript/echarts/plot-dark.html",
  "quality_score": 91.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Basic Bump Chart on anyplot.ai.

Other implementations