{"spec_id":"span-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// span-basic: Basic Span Plot (Highlighted Region)\n// Library: highcharts 12.6.0 | JavaScript 22.23.1\n// Quality: 92/100 | Created: 2026-07-25\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic, tiny fixed-seed LCG) -------------------\nlet seed = 42;\nfunction nextRandom() {\n  seed = (seed * 1103515245 + 12345) & 0x7fffffff;\n  return seed / 0x7fffffff;\n}\n\nconst dayCount = 60;\nconst maintenanceWindows = [\n  { from: 14, to: 18 },\n  { from: 39, to: 43 },\n];\nconst normalRange = { from: 100, to: 150 };\nconst inWindow = (day) => maintenanceWindows.some((w) => day >= w.from && day <= w.to);\n\nconst latencyMs = [];\nfor (let day = 0; day < dayCount; day += 1) {\n  const baseline = 120 + 15 * Math.sin(day / 9);\n  const spike = inWindow(day) ? 180 + 60 * nextRandom() : 0;\n  const noise = (nextRandom() - 0.5) * 16;\n  latencyMs.push(Math.round(baseline + spike + noise));\n}\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"line\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"span-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: \"API response latency with scheduled maintenance windows highlighted\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    title: { text: \"Day of Quarter\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    min: 0,\n    max: dayCount - 1,\n    tickInterval: 10,\n    plotBands: maintenanceWindows.map((w, i) => ({\n      from: w.from,\n      to: w.to,\n      color: `${t.amber}40`,\n      borderColor: t.amber,\n      borderWidth: 1,\n      label: {\n        text: `Maintenance ${i + 1}`,\n        style: { color: t.inkSoft, fontSize: \"13px\" },\n        rotation: 0,\n        y: 20,\n      },\n    })),\n  },\n  yAxis: {\n    title: { text: \"Response Latency (ms)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    gridLineColor: t.grid,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotBands: [\n      {\n        from: normalRange.from,\n        to: normalRange.to,\n        color: `${t.amber}26`,\n        borderColor: t.amber,\n        borderWidth: 1,\n        label: {\n          text: \"Normal range\",\n          align: \"right\",\n          style: { color: t.inkSoft, fontSize: \"13px\" },\n          x: -8,\n          y: 14,\n        },\n      },\n    ],\n  },\n  legend: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    line: { marker: { enabled: false }, lineWidth: 2.5 },\n  },\n  tooltip: {\n    backgroundColor: t.elevatedBg,\n    borderColor: t.grid,\n    style: { color: t.ink, fontSize: \"13px\" },\n    headerFormat: \"Day {point.x}<br/>\",\n    pointFormat: \"{point.y} ms\",\n  },\n  series: [\n    {\n      name: \"Latency\",\n      data: latencyMs,\n      color: t.palette[0],\n    },\n  ],\n});\n"}