{"spec_id":"datamatrix-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// datamatrix-basic: Basic Data Matrix 2D Barcode\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-09-02\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Real ECC 200 Data Matrix, 16x16 modules, encoding \"SERIAL:12345678\"\n// (ASCII encodation: letters/':' as ASCII+1, digit pairs 12/34/56/78 as\n// value+130, padded with codeword 129; GF(256) Reed-Solomon over the ISO\n// 16022 field poly 0x12D with 12 correction codewords; module placement via\n// the standard ISO/IEC 16022 Annex F \"utah\" corner-wrap algorithm). Row 0 and\n// the last column carry the alternating timing pattern; column 0 and the\n// last row carry the solid L-shaped finder pattern.\nconst DM_MATRIX = [\n  [1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,1],\n  [1,0,1,0,1,1,0,0,1,0,1,0,1,1,1,0],\n  [1,0,0,0,0,1,0,1,0,1,1,0,1,0,0,1],\n  [1,1,1,0,0,0,0,1,0,0,1,1,0,0,1,0],\n  [1,0,0,1,0,1,0,0,0,0,0,0,1,1,0,1],\n  [1,0,0,0,1,1,1,0,0,1,1,1,0,0,1,0],\n  [1,0,1,0,1,0,1,0,0,1,0,1,1,0,1,1],\n  [1,1,1,1,0,0,0,0,0,1,0,0,1,1,0,0],\n  [1,1,1,1,1,1,0,1,0,0,1,0,1,0,0,1],\n  [1,1,0,0,1,0,0,0,1,1,1,0,0,0,1,0],\n  [1,1,0,0,1,0,0,0,1,0,1,0,0,0,0,1],\n  [1,1,0,0,1,1,0,1,0,1,1,0,1,0,0,0],\n  [1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,1],\n  [1,0,1,1,1,0,1,0,0,1,0,1,0,1,0,0],\n  [1,0,1,0,1,0,1,0,0,1,0,0,0,0,1,1],\n  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],\n];\n\nconst ENCODED_CONTENT = \"SERIAL:12345678\";\nconst TITLE = \"datamatrix-basic · javascript · highcharts · anyplot.ai\";\n\n// Module colors: dark ink on cream (light) / near-white on near-black (dark)\nconst MODULE_COLOR = t.ink;\n// Elevated (not page) background so the quiet zone reads as a distinct\n// region against the page in both themes, not just in light mode.\nconst DM_BG = t.elevatedBg;\n\n// Chart — square, transparent background, no axes\nconst chart = Highcharts.chart(\"container\", {\n  chart: {\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n    margin: [90, 60, 30, 60],\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: TITLE,\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n    margin: 20,\n  },\n  subtitle: {\n    text: \"Encodes: \" + ENCODED_CONTENT + \"  |  16×16 modules  ·  ECC 200\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: { visible: false },\n  yAxis: { visible: false },\n  legend: { enabled: false },\n  plotOptions: { series: { animation: false } },\n  series: [],\n});\n\n// Draw the Data Matrix using the Highcharts SVG renderer\nconst dmSize = DM_MATRIX.length; // 16 modules\nconst quietZone = 3; // >= 1 module quiet zone required for reliable scanning\nconst totalMods = dmSize + 2 * quietZone;\n\nconst plotW = chart.plotWidth;\nconst plotH = chart.plotHeight;\n\n// Center a square code area within the plot area\nconst codeAreaSize = Math.min(plotW, plotH);\nconst offsetX = chart.plotLeft + (plotW - codeAreaSize) / 2;\nconst offsetY = chart.plotTop + (plotH - codeAreaSize) / 2;\n\nconst cellSize = codeAreaSize / totalMods;\n\n// Quiet-zone background\nchart.renderer\n  .rect(offsetX, offsetY, codeAreaSize, codeAreaSize)\n  .attr({ fill: DM_BG, zIndex: 3, \"shape-rendering\": \"crispEdges\" })\n  .add();\n\n// Dark modules (finder L-pattern, timing pattern, and encoded data region)\nfor (let row = 0; row < dmSize; row++) {\n  for (let col = 0; col < dmSize; col++) {\n    if (DM_MATRIX[row][col]) {\n      chart.renderer\n        .rect(\n          offsetX + (col + quietZone) * cellSize,\n          offsetY + (row + quietZone) * cellSize,\n          cellSize,\n          cellSize\n        )\n        .attr({ fill: MODULE_COLOR, zIndex: 4, \"shape-rendering\": \"crispEdges\" })\n        .add();\n    }\n  }\n}\n"}