Histogram — HTML CSS JS SVG Histogram (No Library)

<div class="hg-card">
  <div class="hg-head">
    <h3>Response time distribution</h3>
    <label class="hg-bins">Bins
      <select id="hgBins"><option>8</option><option selected>12</option><option>20</option></select>
    </label>
  </div>
  <svg class="hg-svg" id="hgSvg" viewBox="0 0 380 220" role="img" aria-label="Histogram"></svg>
  <div class="hg-axis" id="hgAxis"></div>
  <div class="hg-tip" id="hgTip" hidden></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.hg-card{position:relative;background:#fff;border-radius:16px;padding:22px;width:100%;max-width:460px;box-shadow:0 18px 44px rgba(15,23,42,.08)}
.hg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hg-head h3{font-size:16px;font-weight:800;color:#0f172a}
.hg-bins{font-size:12px;font-weight:700;color:#64748b;display:flex;align-items:center;gap:7px}
.hg-bins select{border:1.5px solid #e2e8f0;border-radius:7px;padding:4px 7px;font-size:12px;font-family:inherit;font-weight:700;color:#0f172a}

.hg-svg{width:100%;height:auto;display:block}
.hg-grid{stroke:#eef2f7;stroke-width:1}
.hg-bar{fill:#6366f1;cursor:pointer;transition:fill .12s}
.hg-bar:hover{fill:#4f46e5}
.hg-axis{display:flex;justify-content:space-between;margin-top:6px;padding:0 2px;font-size:10px;font-weight:600;color:#94a3b8}

.hg-tip{position:absolute;pointer-events:none;background:#0f172a;color:#fff;font-size:12px;font-weight:700;padding:6px 10px;border-radius:8px;transform:translate(-50%,-130%);white-space:nowrap;z-index:5}
.hg-tip[hidden]{display:none}

// Raw measurements (e.g. API response times in ms). A histogram bins these.
var DATA = [120,135,140,142,150,151,155,158,160,162,165,168,170,172,175,178,180,182,185,188,190,192,195,198,200,205,210,215,220,118,145,167,177,189,201,159,163,171,183,193,148,156,164,174,186,196,152,169,179,191];

var svg = document.getElementById('hgSvg');
var axis = document.getElementById('hgAxis');
var tip = document.getElementById('hgTip');
var card = document.querySelector('.hg-card');
var binsSel = document.getElementById('hgBins');
var SVGNS = 'http://www.w3.org/2000/svg';
var W = 380, H = 220, PAD = 30;

function bin(count) {
  var min = Math.min.apply(null, DATA), max = Math.max.apply(null, DATA);
  var width = (max - min) / count;
  var bins = [];
  for (var i = 0; i < count; i++) bins.push({ lo: min + i * width, hi: min + (i + 1) * width, n: 0 });
  DATA.forEach(function (v) {
    var idx = Math.min(count - 1, Math.floor((v - min) / width));
    bins[idx].n++;
  });
  return bins;
}

function render() {
  var count = +binsSel.value;
  var bins = bin(count);
  var maxN = Math.max.apply(null, bins.map(function (b) { return b.n; }));
  var bw = (W - PAD * 2) / count;
  svg.innerHTML = '';
  for (var g = 0; g <= 4; g++) {
    var gy = PAD + g * (H - PAD * 2) / 4;
    svg.appendChild(line('hg-grid', PAD, gy, W - PAD, gy));
  }
  bins.forEach(function (b, i) {
    var h = maxN ? (b.n / maxN) * (H - PAD * 2) : 0;
    var x = PAD + i * bw;
    var rect = document.createElementNS(SVGNS, 'rect');
    rect.setAttribute('class', 'hg-bar');
    rect.setAttribute('x', x + 1);
    rect.setAttribute('y', H - PAD - h);
    rect.setAttribute('width', bw - 2);
    rect.setAttribute('height', h);
    rect.setAttribute('rx', 2);
    rect.dataset.range = Math.round(b.lo) + '–' + Math.round(b.hi);
    rect.dataset.n = b.n;
    svg.appendChild(rect);
  });
  // A few axis ticks across the range.
  var min = Math.min.apply(null, DATA), max = Math.max.apply(null, DATA);
  axis.innerHTML = [0, .25, .5, .75, 1].map(function (f) {
    return '<span>' + Math.round(min + f * (max - min)) + '</span>';
  }).join('');
}

function line(cls, x1, y1, x2, y2) {
  var l = document.createElementNS(SVGNS, 'line');
  l.setAttribute('class', cls); l.setAttribute('x1', x1); l.setAttribute('y1', y1); l.setAttribute('x2', x2); l.setAttribute('y2', y2);
  return l;
}

svg.addEventListener('mousemove', function (e) {
  var bar = e.target.closest('.hg-bar');
  if (!bar) { tip.hidden = true; return; }
  var r = card.getBoundingClientRect();
  tip.innerHTML = bar.dataset.range + 'ms: <b>' + bar.dataset.n + '</b>';
  tip.style.left = (e.clientX - r.left) + 'px';
  tip.style.top = (e.clientY - r.top) + 'px';
  tip.hidden = false;
});
svg.addEventListener('mouseleave', function () { tip.hidden = true; });
binsSel.addEventListener('change', render);

render();