{"spec_id":"line-stepwise","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// line-stepwise: Step Line Plot\n// Library: chartjs 4.4.7 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// Number of elevators actively in service, sampled hourly\nconst hours = [\n  \"06:00\", \"07:00\", \"08:00\", \"09:00\", \"10:00\", \"11:00\", \"12:00\",\n  \"13:00\", \"14:00\", \"15:00\", \"16:00\", \"17:00\", \"18:00\", \"19:00\",\n  \"20:00\", \"21:00\",\n];\nconst activeElevators = [\n  2, 2, 4, 4, 4, 3, 3,\n  3, 3, 3, 4, 5, 5, 4,\n  3, 2,\n];\n// Peak coverage window (5 elevators, 17:00-18:00) gets a larger point marker\nconst peakRadius = activeElevators.map((v) => (v === 5 ? 7 : 4));\n\n// --- Mount -----------------------------------------------------------------\nconst canvas = document.createElement(\"canvas\");\ndocument.getElementById(\"container\").appendChild(canvas);\n\n// --- Chart -----------------------------------------------------------------\nnew Chart(canvas, {\n  type: \"line\",\n  data: {\n    labels: hours,\n    datasets: [\n      {\n        label: \"Elevators in service\",\n        data: activeElevators,\n        stepped: \"before\",\n        borderColor: t.palette[0],\n        backgroundColor: t.palette[0],\n        borderWidth: 3.5,\n        pointRadius: peakRadius,\n        pointHoverRadius: peakRadius,\n        pointBackgroundColor: t.palette[0],\n        pointBorderColor: t.pageBg,\n        pointBorderWidth: 1.5,\n        fill: false,\n        tension: 0,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    layout: { padding: { top: 8, right: 24, bottom: 4, left: 4 } },\n    plugins: {\n      title: {\n        display: true,\n        text: \"line-stepwise · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 24, weight: \"500\" },\n        padding: { bottom: 20 },\n      },\n      legend: { display: false },\n    },\n    scales: {\n      x: {\n        ticks: { color: t.inkSoft, font: { size: 14 }, maxRotation: 0, autoSkip: true, maxTicksLimit: 10 },\n        grid: { display: false },\n        title: { display: true, text: \"Time of Day\", color: t.ink, font: { size: 16 } },\n      },\n      y: {\n        ticks: { color: t.inkSoft, font: { size: 14 }, stepSize: 1 },\n        grid: { color: t.grid },\n        title: { display: true, text: \"Elevators in Service\", color: t.ink, font: { size: 16 } },\n        beginAtZero: true,\n        suggestedMax: 6,\n      },\n    },\n  },\n});\n"}