{"spec_id":"line-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// line-basic: Basic Line Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 91/100 | Created: 2026-08-24\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Hourly outdoor temperature over a 48-hour window (two-day trend)\nlet seed = 42;\nfunction lcg() {\n  seed = (seed * 1103515245 + 12345) % 2147483648;\n  return seed / 2147483648;\n}\n\nconst hours = Array.from({ length: 49 }, (_, i) => i);\nconst temperatures = hours.map((h) => {\n  const diurnal = 14 + 9 * Math.sin(((h - 9) / 24) * 2 * Math.PI);\n  const drift = 1.5 * Math.sin((h / 48) * Math.PI);\n  const noise = (lcg() - 0.5) * 1.2;\n  return Math.round((diurnal + drift + noise) * 10) / 10;\n});\n\n// Overnight shading — the diurnal formula troughs at h=3 and h=27, so night\n// (roughly 9pm-9am) spans these windows within the 0-48h range\nconst nightBandColor = Highcharts.color(t.inkSoft).setOpacity(0.06).get(\"rgba\");\nconst nightBands = [\n  { from: 0, to: 9, color: nightBandColor },\n  { from: 21, to: 33, color: nightBandColor },\n  { from: 45, to: 48, color: nightBandColor },\n];\n\n// Peak/trough callout for a clear focal point\nlet peakIdx = 0;\nlet troughIdx = 0;\ntemperatures.forEach((v, i) => {\n  if (v > temperatures[peakIdx]) peakIdx = i;\n  if (v < temperatures[troughIdx]) troughIdx = i;\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: \"line-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    title: {\n      text: \"Hour of Observation\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    tickInterval: 6,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotBands: nightBands,\n  },\n  yAxis: {\n    title: {\n      text: \"Temperature (°C)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineWidth: 1,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: { enabled: false },\n  tooltip: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    line: {\n      lineWidth: 3,\n      marker: { enabled: true, radius: 3, fillColor: t.palette[0], lineWidth: 0 },\n    },\n  },\n  series: [\n    {\n      name: \"Temperature\",\n      type: \"line\",\n      data: temperatures,\n      color: t.palette[0],\n    },\n    {\n      name: \"Peak / Trough\",\n      type: \"scatter\",\n      data: [\n        {\n          x: peakIdx,\n          y: temperatures[peakIdx],\n          name: `Peak ${temperatures[peakIdx]}°C`,\n          dataLabels: { verticalAlign: \"bottom\", y: -14 },\n        },\n        {\n          x: troughIdx,\n          y: temperatures[troughIdx],\n          name: `Trough ${temperatures[troughIdx]}°C`,\n          dataLabels: { verticalAlign: \"top\", y: 14 },\n        },\n      ],\n      color: t.amber,\n      marker: { radius: 6, lineColor: t.pageBg, lineWidth: 2 },\n      dataLabels: {\n        enabled: true,\n        format: \"{point.name}\",\n        style: { color: t.ink, fontSize: \"13px\", fontWeight: \"600\", textOutline: \"none\" },\n      },\n      enableMouseTracking: false,\n      showInLegend: false,\n      zIndex: 5,\n    },\n  ],\n});\n"}