{"spec_id":"line-basic","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// line-basic: Basic Line Plot\n// Library: chartjs 4.4.7 | JavaScript 22.22.3\n// Quality: 87/100 | Created: 2026-06-02\n\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Deterministic LCG so the monthly noise is reproducible across renders (seed = 42)\nlet seed = 42;\nconst rand = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 0x100000000; };\n\n// Data: Berlin monthly mean temperature, Jan 2024 - Dec 2025 (two full seasonal cycles)\nconst monthLabels = [\n  \"Jan '24\", \"Feb '24\", \"Mar '24\", \"Apr '24\", \"May '24\", \"Jun '24\",\n  \"Jul '24\", \"Aug '24\", \"Sep '24\", \"Oct '24\", \"Nov '24\", \"Dec '24\",\n  \"Jan '25\", \"Feb '25\", \"Mar '25\", \"Apr '25\", \"May '25\", \"Jun '25\",\n  \"Jul '25\", \"Aug '25\", \"Sep '25\", \"Oct '25\", \"Nov '25\", \"Dec '25\",\n];\nconst temperatures = monthLabels.map((_, i) => {\n  const seasonal = 10 + 12 * Math.cos((2 * Math.PI * (i - 6)) / 12);\n  const noise = (rand() - 0.5) * 1.6;\n  return +(seasonal + noise).toFixed(1);\n});\n\n// Focal-point storytelling: emphasise the per-cycle summer peak and winter trough\nconst peakIdx = [0, 12].map((s) => {\n  const slice = temperatures.slice(s, s + 12);\n  return s + slice.indexOf(Math.max(...slice));\n});\nconst troughIdx = [0, 12].map((s) => {\n  const slice = temperatures.slice(s, s + 12);\n  return s + slice.indexOf(Math.min(...slice));\n});\nconst focal = new Set([...peakIdx, ...troughIdx]);\n\n// Subtle tinted fill below the line (low-alpha brand green works on both themes)\nconst fillTint = \"rgba(0, 158, 115, 0.12)\";\n\n// Mount canvas into the harness container\nconst canvas = document.createElement(\"canvas\");\ndocument.getElementById(\"container\").appendChild(canvas);\n\nnew Chart(canvas, {\n  type: \"line\",\n  data: {\n    labels: monthLabels,\n    datasets: [{\n      label: \"Mean temperature\",\n      data: temperatures,\n      borderColor: t.palette[0],\n      backgroundColor: fillTint,\n      borderWidth: 3.5,\n      pointRadius: temperatures.map((_, i) => (focal.has(i) ? 8 : 5)),\n      pointHoverRadius: temperatures.map((_, i) => (focal.has(i) ? 10 : 7)),\n      pointBackgroundColor: t.palette[0],\n      pointBorderColor: t.pageBg,\n      pointBorderWidth: temperatures.map((_, i) => (focal.has(i) ? 2.5 : 1.5)),\n      tension: 0.3,\n      fill: \"origin\",\n    }],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    layout: { padding: { top: 16, right: 48, bottom: 8, left: 8 } },\n    plugins: {\n      title: {\n        display: true,\n        text: \"line-basic · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 32, weight: \"normal\" },\n        padding: { top: 8, bottom: 28 },\n      },\n      legend: { display: false },\n    },\n    scales: {\n      x: {\n        ticks: {\n          color: t.inkSoft,\n          font: { size: 18 },\n          maxRotation: 0,\n          autoSkip: true,\n          autoSkipPadding: 24,\n        },\n        grid: { display: false },\n        border: { display: false },\n        title: {\n          display: true,\n          text: \"Month\",\n          color: t.ink,\n          font: { size: 18 },\n          padding: { top: 12 },\n        },\n      },\n      y: {\n        ticks: {\n          color: t.inkSoft,\n          font: { size: 18 },\n          callback: (v) => `${v}°C`,\n        },\n        grid: { color: t.grid },\n        border: { display: false },\n        title: {\n          display: true,\n          text: \"Mean monthly temperature, Berlin\",\n          color: t.ink,\n          font: { size: 22 },\n          padding: { bottom: 12 },\n        },\n      },\n    },\n  },\n});\n"}