{"spec_id":"sparkline-basic","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// sparkline-basic: Basic Sparkline\n// Library: chartjs 4.4.7 | JavaScript 22.23.2\n// Quality: 88/100 | Created: 2026-09-09\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic LCG) ------------------------------------\nfunction lcg(seed) {\n  let state = seed;\n  return () => {\n    state = (state * 1103515245 + 12345) % 2147483648;\n    return state / 2147483648;\n  };\n}\nconst rand = lcg(42);\n\nconst POINTS = 45;\nconst dailySessions = [];\nlet sessions = 8200;\nfor (let i = 0; i < POINTS; i++) {\n  sessions += (rand() - 0.42) * 260;\n  sessions = Math.max(sessions, 4000);\n  dailySessions.push(Math.round(sessions));\n}\nconst labels = dailySessions.map((_, i) => `Day ${i + 1}`);\n\nconst lastIndex = dailySessions.length - 1;\nconst dataMin = Math.min(...dailySessions);\nconst dataMax = Math.max(...dailySessions);\nconst minIndex = dailySessions.indexOf(dataMin);\nconst maxIndex = dailySessions.indexOf(dataMax);\n\nconst pointRadii = dailySessions.map((_, i) => {\n  if (i === lastIndex) return 10;\n  if (i === minIndex || i === maxIndex) return 7;\n  return 0;\n});\nconst pointColors = dailySessions.map((_, i) => {\n  if (i === lastIndex) return t.palette[0];\n  if (i === minIndex || i === maxIndex) return t.amber;\n  return t.palette[0];\n});\n\nconst dataRange = dataMax - dataMin;\nconst yPad = dataRange * 0.18;\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,\n    datasets: [\n      {\n        data: dailySessions,\n        borderColor: t.palette[0],\n        borderWidth: 3.5,\n        fill: false,\n        tension: 0.15,\n        pointRadius: pointRadii,\n        pointHoverRadius: pointRadii,\n        pointBackgroundColor: pointColors,\n        pointBorderColor: t.pageBg,\n        pointBorderWidth: 2,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    layout: { padding: { top: 10, right: 70, bottom: 20, left: 30 } },\n    plugins: {\n      title: {\n        display: true,\n        text: \"sparkline-basic · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 22 },\n        padding: { bottom: 30 },\n      },\n      legend: { display: false },\n      tooltip: { enabled: false },\n    },\n    scales: {\n      x: { display: false },\n      y: { display: false, suggestedMin: dataMin - yPad, suggestedMax: dataMax + yPad },\n    },\n  },\n});\n"}