{"spec_id":"sudoku-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// sudoku-basic: Basic Sudoku Grid\n// Library: highcharts 12.6.0 | JavaScript 22.23.0\n// Quality: 91/100 | Created: 2026-06-25\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Sudoku puzzle (0 = empty cell)\nconst puzzle = [\n  [5, 3, 0, 0, 7, 0, 0, 0, 0],\n  [6, 0, 0, 1, 9, 5, 0, 0, 0],\n  [0, 9, 8, 0, 0, 0, 0, 6, 0],\n  [8, 0, 0, 0, 6, 0, 0, 0, 3],\n  [4, 0, 0, 8, 0, 3, 0, 0, 1],\n  [7, 0, 0, 0, 2, 0, 0, 0, 6],\n  [0, 6, 0, 0, 0, 0, 2, 8, 0],\n  [0, 0, 0, 4, 1, 9, 0, 0, 5],\n  [0, 0, 0, 0, 8, 0, 0, 7, 9],\n];\n\n// Build scatter data: one point per filled cell\nconst seriesData = [];\nfor (let row = 0; row < 9; row++) {\n  for (let col = 0; col < 9; col++) {\n    const val = puzzle[row][col];\n    if (val !== 0) {\n      seriesData.push({ x: col + 0.5, y: row + 0.5, val });\n    }\n  }\n}\n\n// Internal grid lines — thick at box boundaries (3, 6), thin at cell boundaries\nconst xPlotLines = [];\nconst yPlotLines = [];\nfor (let i = 1; i <= 8; i++) {\n  const isBox = i % 3 === 0;\n  xPlotLines.push({ value: i, color: isBox ? t.ink : t.inkSoft, width: isBox ? 3 : 1, zIndex: 4 });\n  yPlotLines.push({ value: i, color: isBox ? t.ink : t.inkSoft, width: isBox ? 3 : 1, zIndex: 4 });\n}\n\n// Checkerboard shading: 5 alternate 3×3 boxes [boxRow, boxCol]\nconst SHADED_BOXES = [[0, 0], [0, 2], [1, 1], [2, 0], [2, 2]];\n\nfunction drawBoxShades(chart) {\n  if (chart._boxShades) {\n    chart._boxShades.forEach((el) => el.destroy());\n  }\n  chart._boxShades = [];\n  const boxW = chart.plotWidth / 3;\n  const boxH = chart.plotHeight / 3;\n  SHADED_BOXES.forEach(([boxRow, boxCol]) => {\n    const el = chart.renderer\n      .rect(chart.plotLeft + boxCol * boxW, chart.plotTop + boxRow * boxH, boxW, boxH)\n      .attr({ fill: t.elevatedBg, zIndex: 1 })\n      .add();\n    chart._boxShades.push(el);\n  });\n}\n\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"scatter\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n    plotBorderColor: t.ink,\n    plotBorderWidth: 3,\n    margin: [80, 60, 60, 60],\n    events: {\n      load: function () { drawBoxShades(this); },\n      redraw: function () { drawBoxShades(this); },\n    },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"sudoku-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    min: 0,\n    max: 9,\n    startOnTick: false,\n    endOnTick: false,\n    lineWidth: 0,\n    tickLength: 0,\n    gridLineWidth: 0,\n    labels: { enabled: false },\n    title: { enabled: false },\n    plotLines: xPlotLines,\n  },\n  yAxis: {\n    min: 0,\n    max: 9,\n    reversed: true,\n    startOnTick: false,\n    endOnTick: false,\n    lineWidth: 0,\n    tickLength: 0,\n    gridLineWidth: 0,\n    labels: { enabled: false },\n    title: { enabled: false },\n    plotLines: yPlotLines,\n  },\n  legend: { enabled: false },\n  tooltip: { enabled: false },\n  plotOptions: {\n    scatter: {\n      marker: { enabled: false },\n      dataLabels: {\n        enabled: true,\n        allowOverlap: true,\n        align: \"center\",\n        verticalAlign: \"middle\",\n        y: 0,\n        formatter: function () {\n          return this.point.val;\n        },\n        style: {\n          color: t.ink,\n          fontSize: \"28px\",\n          fontWeight: \"700\",\n          textOutline: \"none\",\n        },\n      },\n    },\n    series: { animation: false },\n  },\n  series: [\n    {\n      type: \"scatter\",\n      name: \"Numbers\",\n      data: seriesData,\n      color: \"transparent\",\n    },\n  ],\n});\n"}