{"spec_id":"histogram-overlapping","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// histogram-overlapping: Overlapping Histograms\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 92/100 | Created: 2026-08-18\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic LCG + Box-Muller) -----------------------\nlet seed = 42;\nfunction nextUniform() {\n  seed = (seed * 1664525 + 1013904223) % 4294967296;\n  return seed / 4294967296;\n}\nfunction nextNormal(mean, sd) {\n  const u1 = Math.max(nextUniform(), 1e-9);\n  const u2 = nextUniform();\n  const z = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);\n  return mean + z * sd;\n}\n\nconst trialsPerGroup = 220;\nconst controlReactionTimes = Array.from({ length: trialsPerGroup }, () => nextNormal(480, 62));\nconst treatmentReactionTimes = Array.from({ length: trialsPerGroup }, () => nextNormal(428, 55));\n\n// Shared bin edges so both distributions compare directly\nconst binWidth = 20;\nconst binStart = 260;\nconst binEnd = 660;\n\nconst buildHistogram = (values) => {\n  const bins = [];\n  for (let edge = binStart; edge < binEnd; edge += binWidth) {\n    const count = values.filter((v) => v >= edge && v < edge + binWidth).length;\n    bins.push([edge + binWidth / 2, count]);\n  }\n  return bins;\n};\n\nconst controlBins = buildHistogram(controlReactionTimes);\nconst treatmentBins = buildHistogram(treatmentReactionTimes);\n\nconst mean = (values) => values.reduce((sum, v) => sum + v, 0) / values.length;\nconst controlMean = mean(controlReactionTimes);\nconst treatmentMean = mean(treatmentReactionTimes);\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-overlapping · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: `n = ${trialsPerGroup} trials per group · treatment reacts ${Math.round(controlMean - treatmentMean)} ms faster on average`,\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    title: { text: \"Reaction Time (ms)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineWidth: 1,\n    lineColor: t.grid,\n    tickColor: t.grid,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    min: binStart,\n    max: binEnd,\n    plotLines: [\n      {\n        value: controlMean,\n        color: t.palette[0],\n        width: 2,\n        dashStyle: \"Dash\",\n        zIndex: 5,\n        label: {\n          text: `Control mean ${Math.round(controlMean)} ms`,\n          style: { color: t.palette[0], fontSize: \"12px\", fontWeight: \"600\" },\n          rotation: 0,\n          align: \"left\",\n          x: 4,\n          y: 14,\n        },\n      },\n      {\n        value: treatmentMean,\n        color: t.palette[1],\n        width: 2,\n        dashStyle: \"Dash\",\n        zIndex: 5,\n        label: {\n          text: `Treatment mean ${Math.round(treatmentMean)} ms`,\n          style: { color: t.palette[1], fontSize: \"12px\", fontWeight: \"600\" },\n          rotation: 0,\n          align: \"right\",\n          x: -4,\n          y: 32,\n        },\n      },\n    ],\n  },\n  yAxis: {\n    title: { text: \"Number of Trials\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineWidth: 0,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: {\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  tooltip: { enabled: false },\n  plotOptions: {\n    column: {\n      grouping: false,\n      groupPadding: 0,\n      pointPadding: 0,\n      borderWidth: 0,\n      borderRadius: 3,\n      pointRange: binWidth,\n    },\n    series: { animation: false },\n  },\n  series: [\n    {\n      name: \"Control group\",\n      data: controlBins,\n      color: {\n        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },\n        stops: [\n          [0, Highcharts.color(t.palette[0]).setOpacity(0.75).get()],\n          [1, Highcharts.color(t.palette[0]).setOpacity(0.4).get()],\n        ],\n      },\n    },\n    {\n      name: \"Treatment group\",\n      data: treatmentBins,\n      color: {\n        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },\n        stops: [\n          [0, Highcharts.color(t.palette[1]).setOpacity(0.75).get()],\n          [1, Highcharts.color(t.palette[1]).setOpacity(0.4).get()],\n        ],\n      },\n    },\n  ],\n});\n"}