{"spec_id":"line-timeseries","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// line-timeseries: Time Series Line Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 87/100 | Created: 2026-09-05\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Daily average temperature readings (°C) across 2024 (leap year), with a\n// seasonal cycle plus noise from a tiny fixed-seed LCG (no seeded RNG in-browser).\nlet seed = 42;\nfunction nextRandom() {\n  seed = (seed * 1664525 + 1013904223) % 4294967296;\n  return seed / 4294967296;\n}\n\nconst startDate = Date.UTC(2024, 0, 1);\nconst dayMs = 24 * 3600 * 1000;\nconst daysInYear = 366;\nconst temperatures = [];\nfor (let day = 0; day < daysInYear; day++) {\n  const seasonal = 12 + 10 * Math.sin(((day - 100) / 365) * 2 * Math.PI);\n  const noise = (nextRandom() - 0.5) * 4;\n  const value = Math.round((seasonal + noise) * 10) / 10;\n  temperatures.push([startDate + day * dayMs, value]);\n}\n\n// Annual mean plus the seasonal peak/trough — called out below as a\n// dashed reference line and two flagged points, so the shape isn't just\n// implied by the curve.\nlet sum = 0;\nlet peak = temperatures[0];\nlet trough = temperatures[0];\nfor (const point of temperatures) {\n  sum += point[1];\n  if (point[1] > peak[1]) peak = point;\n  if (point[1] < trough[1]) trough = point;\n}\nconst average = Math.round((sum / temperatures.length) * 10) / 10;\n\nconst calloutMarker = {\n  enabled: true,\n  radius: 6,\n  fillColor: t.palette[0],\n  lineWidth: 2,\n  lineColor: t.ink,\n};\nconst data = temperatures.map((point) => {\n  if (point === peak) {\n    return {\n      x: point[0],\n      y: point[1],\n      marker: calloutMarker,\n      dataLabels: {\n        enabled: true,\n        format: \"Peak: {y}°C\",\n        y: -16,\n        style: { color: t.ink, fontSize: \"13px\", fontWeight: \"600\", textOutline: \"none\" },\n      },\n    };\n  }\n  if (point === trough) {\n    return {\n      x: point[0],\n      y: point[1],\n      marker: calloutMarker,\n      dataLabels: {\n        enabled: true,\n        format: \"Low: {y}°C\",\n        y: -16,\n        style: { color: t.ink, fontSize: \"13px\", fontWeight: \"600\", textOutline: \"none\" },\n      },\n    };\n  }\n  return point;\n});\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"area\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"line-timeseries · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    type: \"datetime\",\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    gridLineWidth: 1,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    title: { text: \"Date\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n  },\n  yAxis: {\n    title: {\n      text: \"Avg. Temperature (°C)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    gridLineWidth: 1,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotLines: [\n      {\n        value: average,\n        color: t.inkSoft,\n        dashStyle: \"Dash\",\n        width: 1.5,\n        zIndex: 5,\n        label: {\n          text: `Annual avg: ${average}°C`,\n          align: \"right\",\n          x: -10,\n          y: -6,\n          style: { color: t.inkSoft, fontSize: \"13px\" },\n        },\n      },\n    ],\n  },\n  legend: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    area: {\n      lineWidth: 2.5,\n      marker: { enabled: false },\n      dataLabels: { enabled: false },\n      fillColor: {\n        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },\n        stops: [\n          [0, Highcharts.color(t.palette[0]).setOpacity(0.35).get(\"rgba\")],\n          [1, Highcharts.color(t.palette[0]).setOpacity(0).get(\"rgba\")],\n        ],\n      },\n    },\n  },\n  series: [\n    {\n      name: \"Avg. Temperature\",\n      data,\n    },\n  ],\n});\n"}