{"spec_id":"histogram-stacked","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// histogram-stacked: Stacked Histogram\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-09-05\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// Fixed-seed LCG — the browser has no seeded Math.random\nlet seed = 42;\nfunction lcgRandom() {\n  seed = (seed * 1664525 + 1013904223) % 4294967296;\n  return seed / 4294967296;\n}\nfunction randNormal(mean, stdDev) {\n  const u1 = lcgRandom() || 1e-9;\n  const u2 = lcgRandom();\n  const z = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);\n  return mean + z * stdDev;\n}\n\nconst modes = [\"Car\", \"Bus\", \"Train\"];\nconst modeParams = {\n  Car: { mean: 22, stdDev: 6, count: 220 },\n  Bus: { mean: 34, stdDev: 8, count: 180 },\n  Train: { mean: 28, stdDev: 5, count: 150 },\n};\n\nconst commuteTimes = [];\nmodes.forEach((mode) => {\n  const { mean, stdDev, count } = modeParams[mode];\n  for (let i = 0; i < count; i++) {\n    commuteTimes.push({ mode, minutes: Math.max(2, randNormal(mean, stdDev)) });\n  }\n});\n\n// Shared bin boundaries applied to every group\nconst binWidth = 5;\nconst minValue = Math.floor(Math.min(...commuteTimes.map((d) => d.minutes)) / binWidth) * binWidth;\nconst maxValue = Math.ceil(Math.max(...commuteTimes.map((d) => d.minutes)) / binWidth) * binWidth;\nconst binCount = Math.round((maxValue - minValue) / binWidth);\nconst binLabels = Array.from(\n  { length: binCount },\n  (_, i) => `${minValue + i * binWidth}-${minValue + (i + 1) * binWidth}`,\n);\n\nconst seriesData = {};\nmodes.forEach((mode) => {\n  seriesData[mode] = new Array(binCount).fill(0);\n});\ncommuteTimes.forEach(({ mode, minutes }) => {\n  const binIndex = Math.min(Math.max(Math.floor((minutes - minValue) / binWidth), 0), binCount - 1);\n  seriesData[mode][binIndex] += 1;\n});\n\n// --- Chart -------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"column\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"histogram-stacked · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    categories: binLabels,\n    title: { text: \"Commute Time (minutes)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    title: { text: \"Number of Commuters\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    stackLabels: {\n      enabled: true,\n      style: { color: t.inkSoft, fontSize: \"13px\", fontWeight: \"600\", textOutline: \"none\" },\n    },\n  },\n  legend: {\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  plotOptions: {\n    series: { animation: false, stacking: \"normal\" },\n    column: {\n      borderWidth: 0,\n      pointPadding: 0.05,\n      groupPadding: 0,\n      borderRadius: { radius: 4, scope: \"stack\" },\n    },\n  },\n  series: modes.map((mode) => ({ name: mode, data: seriesData[mode] })),\n});\n"}