{"spec_id":"line-markers","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// line-markers: Line Plot with Markers\n// Library: chartjs 4.4.7 | JavaScript 22.23.2\n// Quality: 92/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\nfunction withAlpha(hex, alpha) {\n  const r = parseInt(hex.slice(1, 3), 16);\n  const g = parseInt(hex.slice(3, 5), 16);\n  const b = parseInt(hex.slice(5, 7), 16);\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\n// --- Data (in-memory, deterministic) ---------------------------------------\nconst inspectionNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\nconst lineATorque = [24.8, 25.1, 24.6, 25.3, 24.9, 25.6, 25.0, 24.7, 25.2, 24.5, 25.4, 24.9, 25.1, 24.8];\nconst lineBTorque = [23.9, 24.2, 24.6, 23.7, 24.1, 24.4, 23.8, 24.5, 24.0, 24.3, 23.6, 24.2, 23.9, 24.4];\n\nconst lineAData = inspectionNumber.map((x, i) => ({ x, y: lineATorque[i] }));\nconst lineBData = inspectionNumber.map((x, i) => ({ x, y: lineBTorque[i] }));\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    datasets: [\n      {\n        label: \"Assembly Line A\",\n        data: lineAData,\n        borderColor: t.palette[0],\n        backgroundColor: withAlpha(t.palette[0], 0.12),\n        fill: \"+1\",\n        pointStyle: \"circle\",\n        pointRadius: 7,\n        pointHoverRadius: 7,\n        pointBackgroundColor: t.palette[0],\n        pointBorderColor: t.pageBg,\n        pointBorderWidth: 1.5,\n        borderWidth: 3,\n        tension: 0,\n        order: 2,\n      },\n      {\n        label: \"Assembly Line B\",\n        data: lineBData,\n        borderColor: t.palette[1],\n        pointStyle: \"triangle\",\n        pointRadius: 8,\n        pointHoverRadius: 8,\n        pointBackgroundColor: t.pageBg,\n        pointBorderColor: t.palette[1],\n        pointBorderWidth: 2,\n        borderWidth: 3,\n        tension: 0,\n        order: 1,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    plugins: {\n      title: {\n        display: true,\n        text: \"line-markers · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 22, weight: \"500\" },\n      },\n      legend: {\n        position: \"top\",\n        labels: { color: t.ink, font: { size: 16 }, usePointStyle: true },\n      },\n    },\n    scales: {\n      x: {\n        type: \"linear\",\n        ticks: { color: t.inkSoft, font: { size: 14 }, stepSize: 1 },\n        grid: { display: false },\n        border: { color: t.inkSoft },\n        title: { display: true, text: \"Inspection Number\", color: t.ink, font: { size: 16 } },\n      },\n      y: {\n        ticks: { color: t.inkSoft, font: { size: 14 } },\n        grid: { color: t.grid, drawTicks: false },\n        border: { color: t.inkSoft },\n        title: { display: true, text: \"Bolt Torque (N·m)\", color: t.ink, font: { size: 16 } },\n      },\n    },\n  },\n});\n"}