Basic Sudoku Grid in Highcharts (JavaScript)

The same plot in 14 other libraries — JavaScript: Chart.js, D3.js, Apache ECharts, MUI X Charts; Python: Altair, Bokeh, lets-plot, Matplotlib, Plotly, plotnine, Pygal, Seaborn; R: ggplot2; Julia: Makie.jl. Compare all 15 side by side: Basic Sudoku Grid in Python, R, Julia and JavaScript.

A standard 9×9 Sudoku grid with proper visual hierarchy showing 3×3 box regions. Thick lines separate the nine boxes while thin lines divide individual cells. The clean black-and-white design is optimized for printing and solving puzzles.

Basic Sudoku Grid rendered with Highcharts

Renders

JavaScript source (Highcharts)

// anyplot.ai
// sudoku-basic: Basic Sudoku Grid
// Library: highcharts 12.6.0 | JavaScript 22.23.0
// Quality: 91/100 | Created: 2026-06-25
//# anyplot-orientation: square

const t = window.ANYPLOT_TOKENS;

// Sudoku puzzle (0 = empty cell)
const puzzle = [
  [5, 3, 0, 0, 7, 0, 0, 0, 0],
  [6, 0, 0, 1, 9, 5, 0, 0, 0],
  [0, 9, 8, 0, 0, 0, 0, 6, 0],
  [8, 0, 0, 0, 6, 0, 0, 0, 3],
  [4, 0, 0, 8, 0, 3, 0, 0, 1],
  [7, 0, 0, 0, 2, 0, 0, 0, 6],
  [0, 6, 0, 0, 0, 0, 2, 8, 0],
  [0, 0, 0, 4, 1, 9, 0, 0, 5],
  [0, 0, 0, 0, 8, 0, 0, 7, 9],
];

// Build scatter data: one point per filled cell
const seriesData = [];
for (let row = 0; row < 9; row++) {
  for (let col = 0; col < 9; col++) {
    const val = puzzle[row][col];
    if (val !== 0) {
      seriesData.push({ x: col + 0.5, y: row + 0.5, val });
    }
  }
}

// Internal grid lines — thick at box boundaries (3, 6), thin at cell boundaries
const xPlotLines = [];
const yPlotLines = [];
for (let i = 1; i <= 8; i++) {
  const isBox = i % 3 === 0;
  xPlotLines.push({ value: i, color: isBox ? t.ink : t.inkSoft, width: isBox ? 3 : 1, zIndex: 4 });
  yPlotLines.push({ value: i, color: isBox ? t.ink : t.inkSoft, width: isBox ? 3 : 1, zIndex: 4 });
}

// Checkerboard shading: 5 alternate 3×3 boxes [boxRow, boxCol]
const SHADED_BOXES = [[0, 0], [0, 2], [1, 1], [2, 0], [2, 2]];

function drawBoxShades(chart) {
  if (chart._boxShades) {
    chart._boxShades.forEach((el) => el.destroy());
  }
  chart._boxShades = [];
  const boxW = chart.plotWidth / 3;
  const boxH = chart.plotHeight / 3;
  SHADED_BOXES.forEach(([boxRow, boxCol]) => {
    const el = chart.renderer
      .rect(chart.plotLeft + boxCol * boxW, chart.plotTop + boxRow * boxH, boxW, boxH)
      .attr({ fill: t.elevatedBg, zIndex: 1 })
      .add();
    chart._boxShades.push(el);
  });
}

Highcharts.chart("container", {
  chart: {
    type: "scatter",
    backgroundColor: "transparent",
    animation: false,
    style: { fontFamily: "inherit" },
    plotBorderColor: t.ink,
    plotBorderWidth: 3,
    margin: [80, 60, 60, 60],
    events: {
      load: function () { drawBoxShades(this); },
      redraw: function () { drawBoxShades(this); },
    },
  },
  credits: { enabled: false },
  colors: t.palette,
  title: {
    text: "sudoku-basic · javascript · highcharts · anyplot.ai",
    style: { color: t.ink, fontSize: "22px", fontWeight: "600" },
  },
  xAxis: {
    min: 0,
    max: 9,
    startOnTick: false,
    endOnTick: false,
    lineWidth: 0,
    tickLength: 0,
    gridLineWidth: 0,
    labels: { enabled: false },
    title: { enabled: false },
    plotLines: xPlotLines,
  },
  yAxis: {
    min: 0,
    max: 9,
    reversed: true,
    startOnTick: false,
    endOnTick: false,
    lineWidth: 0,
    tickLength: 0,
    gridLineWidth: 0,
    labels: { enabled: false },
    title: { enabled: false },
    plotLines: yPlotLines,
  },
  legend: { enabled: false },
  tooltip: { enabled: false },
  plotOptions: {
    scatter: {
      marker: { enabled: false },
      dataLabels: {
        enabled: true,
        allowOverlap: true,
        align: "center",
        verticalAlign: "middle",
        y: 0,
        formatter: function () {
          return this.point.val;
        },
        style: {
          color: t.ink,
          fontSize: "28px",
          fontWeight: "700",
          textOutline: "none",
        },
      },
    },
    series: { animation: false },
  },
  series: [
    {
      type: "scatter",
      name: "Numbers",
      data: seriesData,
      color: "transparent",
    },
  ],
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/sudoku-basic/highcharts/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.

{
  "spec_id": "sudoku-basic",
  "language": "javascript",
  "library": "highcharts",
  "page": "https://anyplot.ai/sudoku-basic/javascript/highcharts",
  "hub": "https://anyplot.ai/sudoku-basic",
  "code_json": "https://api.anyplot.ai/specs/sudoku-basic/highcharts/code",
  "spec_json": "https://api.anyplot.ai/specs/sudoku-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/sudoku-basic/javascript/highcharts/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/sudoku-basic/javascript/highcharts/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/sudoku-basic/javascript/highcharts/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/sudoku-basic/javascript/highcharts/plot-dark.html",
  "quality_score": 91.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Basic Sudoku Grid on anyplot.ai.

Other implementations