{"spec_id":"range-interval","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// range-interval: Range Interval Chart\n// Library: chartjs 4.4.7 | JavaScript 22.23.2\n// Quality: 88/100 | Created: 2026-09-02\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) — Berlin monthly temperature range ----\nconst months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\nconst lowC = [0, 0, 2, 5, 9, 13, 15, 14, 11, 7, 3, 1];\nconst highC = [3, 5, 9, 14, 19, 22, 24, 24, 19, 13, 7, 4];\nconst ranges = months.map((_, i) => [lowC[i], highC[i]]);\nconst widestIdx = months.reduce((best, _, i) => (highC[i] - lowC[i] > highC[best] - lowC[best] ? i : best), 0);\n\n// brand green fill, hardcoded rgba (t.palette[0] is always #009E73) — widest-range month gets a stronger fill\nconst fillColors = months.map((_, i) => (i === widestIdx ? \"rgba(0, 158, 115, 0.9)\" : \"rgba(0, 158, 115, 0.5)\"));\nconst borderWidths = months.map((_, i) => (i === widestIdx ? 3 : 2));\n\n// --- Title sizing (scale down once the title exceeds the ~67-char baseline) -\nconst title = \"Berlin Monthly Temperature Range · range-interval · javascript · chartjs · anyplot.ai\";\nconst titleFontSize = Math.max(14, Math.round(22 * Math.min(1, 67 / title.length)));\n\n// --- Mount -----------------------------------------------------------------\nconst canvas = document.createElement(\"canvas\");\ndocument.getElementById(\"container\").appendChild(canvas);\n\n// --- Chart -----------------------------------------------------------------\nnew Chart(canvas, {\n  type: \"bar\",\n  data: {\n    labels: months,\n    datasets: [\n      {\n        label: \"Temperature range\",\n        data: ranges,\n        backgroundColor: fillColors,\n        borderColor: t.palette[0],\n        borderWidth: borderWidths,\n        borderSkipped: false,\n        borderRadius: 6,\n        barPercentage: 0.6,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    plugins: {\n      title: { display: true, text: title, color: t.ink, font: { size: titleFontSize, weight: \"500\" } },\n      legend: { display: false },\n      tooltip: {\n        callbacks: {\n          label: (ctx) => `Low ${lowC[ctx.dataIndex]}°C – High ${highC[ctx.dataIndex]}°C`,\n        },\n      },\n    },\n    scales: {\n      x: {\n        ticks: { color: t.inkSoft, font: { size: 14 } },\n        grid: { display: false },\n        title: { display: true, text: \"Month\", color: t.ink, font: { size: 16 } },\n      },\n      y: {\n        ticks: { color: t.inkSoft, font: { size: 14 }, callback: (v) => `${v}°C` },\n        grid: { color: t.grid },\n        title: { display: true, text: \"Average Temperature (°C)\", color: t.ink, font: { size: 16 } },\n      },\n    },\n  },\n});\n"}