A density histogram displays the distribution of a continuous variable normalized so that the total area under the histogram equals 1, representing probability density instead of raw counts. This normalization allows direct comparison between distributions with different sample sizes and enables overlaying theoretical probability density functions (PDFs) for statistical analysis.
// anyplot.ai
// histogram-density: Density Histogram
// Library: highcharts 12.6.0 | JavaScript 22.23.2
// Quality: 89/100 | Created: 2026-09-05
const t = window.ANYPLOT_TOKENS;
// --- Data (in-memory, deterministic) ----------------------------------------
// mulberry32 — small, dependency-free, seeded PRNG (Math.random() is not seeded).
function mulberry32(seed) {
let a = seed;
return function () {
a |= 0;
a = (a + 0x6d2b79f5) | 0;
let z = Math.imul(a ^ (a >>> 15), 1 | a);
z = (z + Math.imul(z ^ (z >>> 7), 61 | z)) ^ z;
return ((z ^ (z >>> 14)) >>> 0) / 4294967296;
};
}
const rand = mulberry32(42);
// Box-Muller transform -> approximately normal samples.
function nextNormal(mean, sd) {
const u1 = Math.max(rand(), 1e-12);
const u2 = rand();
const z = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
return mean + sd * z;
}
const MEAN = 10.0; // target bolt diameter, mm
const SD = 0.05; // machining process variability, mm
const N = 600;
const diameters = Array.from({ length: N }, () => nextNormal(MEAN, SD));
// --- Histogram binning (density-normalized so total bar area = 1) ----------
const NUM_BINS = 24;
const dataMin = Math.min(...diameters);
const dataMax = Math.max(...diameters);
const binWidth = (dataMax - dataMin) / NUM_BINS;
const counts = new Array(NUM_BINS).fill(0);
diameters.forEach((value) => {
const bin = Math.min(NUM_BINS - 1, Math.floor((value - dataMin) / binWidth));
counts[bin] += 1;
});
const sampleMean = diameters.reduce((sum, v) => sum + v, 0) / N;
const histogramData = counts.map((count, i) => {
const center = dataMin + (i + 0.5) * binWidth;
const density = count / (N * binWidth);
return [center, density];
});
// --- Theoretical normal PDF overlay (goodness-of-fit reference) ------------
function normalPdf(x, mean, sd) {
return (
Math.exp(-0.5 * ((x - mean) / sd) ** 2) / (sd * Math.sqrt(2 * Math.PI))
);
}
const CURVE_POINTS = 120;
const curveMin = MEAN - 4 * SD;
const curveMax = MEAN + 4 * SD;
const pdfCurve = Array.from({ length: CURVE_POINTS }, (_, i) => {
const x = curveMin + (i / (CURVE_POINTS - 1)) * (curveMax - curveMin);
return [x, normalPdf(x, MEAN, SD)];
});
// --- Chart -------------------------------------------------------------------
Highcharts.chart("container", {
chart: {
type: "column",
backgroundColor: "transparent",
animation: false,
style: { fontFamily: "inherit" },
},
credits: { enabled: false },
colors: t.palette,
title: {
text: "histogram-density · javascript · highcharts · anyplot.ai",
style: { color: t.ink, fontSize: "22px", fontWeight: "600" },
},
xAxis: {
type: "linear",
title: {
text: "Bolt Diameter (mm)",
style: { color: t.inkSoft, fontSize: "16px" },
},
lineWidth: 0,
tickWidth: 0,
gridLineColor: t.grid,
labels: {
style: { color: t.inkSoft, fontSize: "14px" },
format: "{value:.2f}",
},
plotLines: [
{
value: sampleMean,
color: t.inkSoft,
width: 1.5,
dashStyle: "ShortDot",
zIndex: 5,
label: {
text: `Mean ${sampleMean.toFixed(3)} mm`,
rotation: 0,
align: "center",
verticalAlign: "top",
y: 8,
backgroundColor: t.pageBg,
borderRadius: 3,
padding: 4,
style: { color: t.inkSoft, fontSize: "13px", fontWeight: "600" },
},
},
],
},
yAxis: {
title: { text: "Density", style: { color: t.inkSoft, fontSize: "16px" } },
lineWidth: 0,
min: 0,
gridLineColor: t.grid,
labels: { style: { color: t.inkSoft, fontSize: "14px" } },
},
legend: {
itemStyle: { color: t.inkSoft, fontSize: "14px" },
itemHoverStyle: { color: t.ink },
},
tooltip: { valueDecimals: 3 },
plotOptions: {
series: { animation: false },
column: {
pointRange: binWidth,
pointPadding: 0,
groupPadding: 0,
borderWidth: 1,
borderColor: t.pageBg,
},
},
series: [
{
name: "Empirical density",
type: "column",
data: histogramData,
color: t.palette[0],
},
{
name: "Normal PDF (fit)",
type: "areaspline",
data: pdfCurve,
color: t.ink,
fillOpacity: 0.08,
dashStyle: "Dash",
lineWidth: 2.5,
marker: { enabled: false },
enableMouseTracking: false,
},
],
});
Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/histogram-density/highcharts/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.
{
"spec_id": "histogram-density",
"language": "javascript",
"library": "highcharts",
"page": "https://anyplot.ai/histogram-density/javascript/highcharts",
"hub": "https://anyplot.ai/histogram-density",
"code_json": "https://api.anyplot.ai/specs/histogram-density/highcharts/code",
"spec_json": "https://api.anyplot.ai/specs/histogram-density",
"render_light_png": "https://storage.googleapis.com/anyplot-images/plots/histogram-density/javascript/highcharts/plot-light.png",
"render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/histogram-density/javascript/highcharts/plot-dark.png",
"interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/histogram-density/javascript/highcharts/plot-light.html",
"interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/histogram-density/javascript/highcharts/plot-dark.html",
"quality_score": 89.0,
"license": "MIT",
"guide": "https://anyplot.ai/llms.txt"
}Part of Density Histogram on anyplot.ai.