{"spec_id":"histogram-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// histogram-basic: Basic Histogram\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 85/100 | Created: 2026-08-26\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Retail transaction amounts ($), right-skewed: many small purchases, a\n// gradually thinning tail of larger ones — a Gamma(shape=3, scale=40) draw\n// via a sum of exponentials, generated with a fixed-seed LCG.\nlet seed = 42;\nfunction random() {\n  seed = (seed + 0x6d2b79f5) | 0;\n  let z = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n  z = (z + Math.imul(z ^ (z >>> 7), 61 | z)) ^ z;\n  return ((z ^ (z >>> 14)) >>> 0) / 4294967296;\n}\nfunction exponential(rate) {\n  return -Math.log(1 - random()) / rate;\n}\n\nconst SAMPLE_SIZE = 400;\nconst GAMMA_SCALE = 40;\nconst transactionAmounts = [];\nfor (let i = 0; i < SAMPLE_SIZE; i++) {\n  const gamma =\n    exponential(1 / GAMMA_SCALE) +\n    exponential(1 / GAMMA_SCALE) +\n    exponential(1 / GAMMA_SCALE);\n  transactionAmounts.push(gamma);\n}\n\n// --- Binning -----------------------------------------------------------------\nconst BIN_COUNT = 24;\nconst dataMin = Math.min(...transactionAmounts);\nconst dataMax = Math.max(...transactionAmounts);\nconst binWidth = (dataMax - dataMin) / BIN_COUNT;\n\nconst binCounts = new Array(BIN_COUNT).fill(0);\ntransactionAmounts.forEach((value) => {\n  const idx = Math.min(\n    BIN_COUNT - 1,\n    Math.floor((value - dataMin) / binWidth)\n  );\n  binCounts[idx] += 1;\n});\n\nconst histogramData = binCounts.map((count, idx) => ({\n  x: dataMin + (idx + 0.5) * binWidth,\n  y: count,\n}));\n\nconst meanAmount =\n  transactionAmounts.reduce((sum, v) => sum + v, 0) / transactionAmounts.length;\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-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    title: {\n      text: \"Transaction Amount ($)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    labels: {\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n      formatter() {\n        return \"$\" + Math.round(this.value);\n      },\n    },\n    plotLines: [\n      {\n        value: meanAmount,\n        color: t.ink,\n        width: 2,\n        dashStyle: \"Dash\",\n        zIndex: 5,\n        label: {\n          text: `Mean: $${meanAmount.toFixed(0)}`,\n          style: { color: t.inkSoft, fontSize: \"13px\", fontWeight: \"600\" },\n          rotation: 0,\n          y: -8,\n          x: 4,\n        },\n      },\n    ],\n  },\n  yAxis: {\n    min: 0,\n    title: {\n      text: \"Frequency\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: { enabled: false },\n  tooltip: {\n    headerFormat: \"\",\n    pointFormatter() {\n      const lo = this.x - binWidth / 2;\n      const hi = this.x + binWidth / 2;\n      return `$${lo.toFixed(0)}–$${hi.toFixed(0)}: <b>${this.y}</b>`;\n    },\n  },\n  plotOptions: {\n    series: { animation: false },\n    column: {\n      pointRange: binWidth,\n      pointPadding: 0,\n      groupPadding: 0,\n      borderWidth: 1,\n      borderColor: t.pageBg,\n      states: {\n        hover: {\n          brightness: 0.1,\n          borderColor: t.ink,\n        },\n      },\n    },\n  },\n  series: [{ name: \"Transactions\", data: histogramData, color: t.palette[0] }],\n});\n"}