{"spec_id":"bump-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bump-basic: Basic Bump Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 91/100 | Created: 2026-08-24\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// A regional football league table: rank (1 = top) per team across matchweeks.\nconst matchweeks = [\"MW1\", \"MW2\", \"MW3\", \"MW4\", \"MW5\", \"MW6\", \"MW7\", \"MW8\"];\nconst standings = [\n  { team: \"Falcons\", ranks: [3, 2, 1, 1, 2, 1, 1, 1], symbol: \"circle\" },\n  { team: \"Comets\", ranks: [1, 1, 2, 2, 1, 2, 3, 2], symbol: \"diamond\" },\n  { team: \"Vipers\", ranks: [2, 3, 3, 4, 4, 3, 2, 3], symbol: \"square\" },\n  { team: \"Titans\", ranks: [5, 4, 4, 3, 3, 4, 4, 4], symbol: \"triangle\" },\n  { team: \"Wolves\", ranks: [4, 5, 6, 5, 6, 6, 5, 5], symbol: \"triangle-down\" },\n  { team: \"Sharks\", ranks: [6, 6, 5, 6, 5, 5, 6, 6], symbol: \"circle\" },\n];\nconst lastIndex = matchweeks.length - 1;\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"line\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    marginRight: 130,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"bump-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    categories: matchweeks,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    title: { text: \"Matchweek\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n  },\n  yAxis: {\n    title: { text: \"League Position (1 = top)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    min: 1,\n    max: standings.length,\n    tickInterval: 1,\n    allowDecimals: false,\n    reversed: true,\n    gridLineColor: t.grid,\n    lineColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: { enabled: false },\n  tooltip: { headerFormat: \"<b>{point.key}</b><br/>\", pointFormat: \"{series.name}: rank {point.y}\" },\n  plotOptions: {\n    series: {\n      animation: false,\n      lineWidth: 2.5,\n      marker: { radius: 5 },\n      dataLabels: { enabled: false, crop: false, overflow: \"allow\" },\n    },\n  },\n  series: standings.map((entry) => ({\n    name: entry.team,\n    marker: { symbol: entry.symbol },\n    data: entry.ranks.map((rank, i) =>\n      i === lastIndex\n        ? {\n            y: rank,\n            dataLabels: {\n              enabled: true,\n              align: \"left\",\n              x: 10,\n              format: entry.team,\n              style: { color: t.ink, fontSize: \"14px\", fontWeight: \"600\", textOutline: \"none\" },\n            },\n          }\n        : { y: rank }\n    ),\n  })),\n});\n"}