{"spec_id":"waffle-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// waffle-basic: Basic Waffle Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-09-09\n\n//# anyplot-orientation: square\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\nconst departments = [\n  { name: \"Engineering\", value: 34 },\n  { name: \"Marketing\", value: 22 },\n  { name: \"Operations\", value: 18 },\n  { name: \"Sales\", value: 15 },\n  { name: \"Support\", value: 11 },\n];\n\nconst GRID_SIZE = 10;\nlet cellIndex = 0;\nconst series = departments.map((dept, i) => {\n  const data = [];\n  for (let n = 0; n < dept.value; n += 1) {\n    const row = Math.floor(cellIndex / GRID_SIZE);\n    const col = cellIndex % GRID_SIZE;\n    const point = { x: col, y: row };\n    if (n === 0) {\n      // Highcharts-specific touch: stamp the department's percentage as a\n      // dataLabel on its leading square instead of relying on hue alone.\n      point.dataLabels = {\n        enabled: true,\n        format: `${dept.value}%`,\n        verticalAlign: \"middle\",\n        y: 1,\n        style: {\n          color: \"#FFFFFF\",\n          textOutline: \"1.5px rgba(0, 0, 0, 0.55)\",\n          fontSize: \"12px\",\n          fontWeight: \"700\",\n        },\n      };\n    }\n    data.push(point);\n    cellIndex += 1;\n  }\n  return {\n    name: `${dept.name} — ${dept.value}%`,\n    color: t.palette[i],\n    data,\n  };\n});\n\n// Rounded-square marker symbol: a subtle deliberate refinement over a plain\n// solid square, giving the grid a lifted, tile-like depth in both themes.\nHighcharts.SVGRenderer.prototype.symbols.squareRounded = function (x, y, w, h) {\n  const r = Math.round(Math.min(w, h) * 0.22);\n  return [\n    \"M\", x + r, y,\n    \"L\", x + w - r, y,\n    \"Q\", x + w, y, x + w, y + r,\n    \"L\", x + w, y + h - r,\n    \"Q\", x + w, y + h, x + w - r, y + h,\n    \"L\", x + r, y + h,\n    \"Q\", x, y + h, x, y + h - r,\n    \"L\", x, y + r,\n    \"Q\", x, y, x + r, y,\n    \"Z\",\n  ];\n};\n\n// --- Chart -------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"scatter\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n    marginTop: 100,\n    marginBottom: 110,\n    marginLeft: 105,\n    marginRight: 105,\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"waffle-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: \"Annual budget allocation by department — each square = 1%\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    min: -0.5,\n    max: GRID_SIZE - 0.5,\n    tickInterval: 1,\n    gridLineWidth: 0,\n    lineWidth: 0,\n    tickWidth: 0,\n    labels: { enabled: false },\n    title: { text: null },\n  },\n  yAxis: {\n    min: -0.5,\n    max: GRID_SIZE - 0.5,\n    tickInterval: 1,\n    reversed: true,\n    gridLineWidth: 0,\n    lineWidth: 0,\n    tickWidth: 0,\n    labels: { enabled: false },\n    title: { text: null },\n  },\n  legend: {\n    layout: \"horizontal\",\n    align: \"center\",\n    verticalAlign: \"bottom\",\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n    symbolHeight: 14,\n    symbolWidth: 14,\n    symbolRadius: 3,\n  },\n  tooltip: {\n    headerFormat: \"\",\n    pointFormat: \"<b>{series.name}</b>\",\n  },\n  plotOptions: {\n    series: { animation: false, dataLabels: { enabled: false } },\n    scatter: {\n      marker: {\n        symbol: \"squareRounded\",\n        radius: 41,\n        lineWidth: 2,\n        lineColor: t.pageBg,\n      },\n      states: { hover: { halo: { size: 0 } } },\n    },\n  },\n  series,\n});\n"}