Candlestick Chart — Stock OHLC HTML CSS JS Snippet

<div class="ck-card">
  <div class="ck-head">
    <div>
      <div class="ck-sym">AURX <span class="ck-tf">· 1D</span></div>
      <div class="ck-price"><span id="ckPrice">—</span> <span class="ck-chg" id="ckChg">hover a candle</span></div>
    </div>
    <div class="ck-hl"><span class="up">H <b id="ckHi">—</b></span><span class="down">L <b id="ckLo">—</b></span></div>
  </div>
  <div class="ck-plot" id="ckPlot">
    <svg class="ck-svg" id="ckSvg" viewBox="0 0 320 180" preserveAspectRatio="none"></svg>
    <div class="ck-tip" id="ckTip"></div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.ck-card{background:#111827;border:1px solid #1f2937;border-radius:16px;padding:18px;width:100%;max-width:420px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.ck-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.ck-sym{font-size:15px;font-weight:800;color:#f9fafb}
.ck-tf{color:#6b7280;font-weight:600;font-size:12px}
.ck-price{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.ck-price #ckPrice{font-size:22px;font-weight:800;color:#f9fafb;font-variant-numeric:tabular-nums}
.ck-chg{font-size:12px;font-weight:700}
.ck-chg.up{color:#34d399}.ck-chg.down{color:#f87171}
.ck-hl{display:flex;flex-direction:column;gap:2px;text-align:right;font-size:11px;font-weight:600}
.ck-hl .up{color:#34d399}.ck-hl .down{color:#f87171}
.ck-hl b{font-variant-numeric:tabular-nums}

.ck-plot{position:relative}
.ck-svg{width:100%;height:180px;display:block}
.ck-wick{stroke-width:1.4}
.ck-body{transition:opacity .12s}
.ck-up{fill:#10b981;stroke:#10b981}
.ck-down{fill:#ef4444;stroke:#ef4444}
.ck-col:hover .ck-body{opacity:.7}
.ck-cross{stroke:#475569;stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .12s}

.ck-tip{position:absolute;top:6px;transform:translateX(-50%);background:#1f2937;border:1px solid #374151;color:#e5e7eb;border-radius:8px;padding:7px 10px;font-size:11px;line-height:1.5;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;box-shadow:0 6px 18px rgba(0,0,0,.4);z-index:2}
.ck-tip b{font-variant-numeric:tabular-nums}
.ck-tip .g{color:#9ca3af}

var svg = document.getElementById('ckSvg');
var plot = document.getElementById('ckPlot');
var tip = document.getElementById('ckTip');
var NS = 'http://www.w3.org/2000/svg';
var W = 320, H = 180, PAD = 10;
var DATA = [];

function genData() {
  var price = 120, out = [];
  for (var i = 0; i < 24; i++) {
    var open = price;
    var close = open + (Math.random() - 0.48) * 9;
    var high = Math.max(open, close) + Math.random() * 4;
    var low = Math.min(open, close) - Math.random() * 4;
    out.push({ o: open, c: close, h: high, l: low });
    price = close;
  }
  return out;
}

function build() {
  DATA = genData();
  var max = Math.max.apply(null, DATA.map(function (d) { return d.h; }));
  var min = Math.min.apply(null, DATA.map(function (d) { return d.l; }));
  var range = max - min || 1;
  var n = DATA.length;
  var step = (W - PAD * 2) / n;
  var bodyW = step * 0.6;
  function y(v) { return PAD + (1 - (v - min) / range) * (H - PAD * 2); }

  var frag = '';
  DATA.forEach(function (d, i) {
    var cx = PAD + step * i + step / 2;
    var up = d.c >= d.o;
    var cls = up ? 'ck-up' : 'ck-down';
    var bodyTop = y(Math.max(d.o, d.c));
    var bodyH = Math.max(1.5, Math.abs(y(d.o) - y(d.c)));
    frag += '<g class="ck-col" data-i="' + i + '">' +
      '<rect x="' + (cx - step / 2) + '" y="0" width="' + step + '" height="' + H + '" fill="transparent"/>' +
      '<line class="ck-wick ' + cls + '" x1="' + cx + '" y1="' + y(d.h) + '" x2="' + cx + '" y2="' + y(d.l) + '"/>' +
      '<rect class="ck-body ' + cls + '" x="' + (cx - bodyW / 2) + '" y="' + bodyTop + '" width="' + bodyW + '" height="' + bodyH + '" rx="1"/>' +
      '</g>';
  });
  frag += '<line class="ck-cross" id="ckCross" x1="0" y1="' + PAD + '" x2="0" y2="' + (H - PAD) + '"/>';
  svg.innerHTML = frag;

  var last = DATA[n - 1];
  document.getElementById('ckHi').textContent = max.toFixed(2);
  document.getElementById('ckLo').textContent = min.toFixed(2);
  show(n - 1);

  svg.querySelectorAll('.ck-col').forEach(function (g) {
    g.addEventListener('mouseenter', function () { show(+g.dataset.i); });
  });
  plot.addEventListener('mouseleave', function () { show(DATA.length - 1); hideCross(); });
}

function show(i) {
  var d = DATA[i];
  var price = document.getElementById('ckPrice');
  price.textContent = d.c.toFixed(2);
  var chg = ((d.c - d.o) / d.o * 100);
  var chgEl = document.getElementById('ckChg');
  chgEl.textContent = (chg >= 0 ? '▲ ' : '▼ ') + Math.abs(chg).toFixed(2) + '%';
  chgEl.className = 'ck-chg ' + (chg >= 0 ? 'up' : 'down');

  var step = (W - PAD * 2) / DATA.length;
  var cx = PAD + step * i + step / 2;
  var cross = document.getElementById('ckCross');
  if (cross) { cross.setAttribute('x1', cx); cross.setAttribute('x2', cx); cross.style.opacity = '1'; }

  tip.innerHTML = '<span class="g">O</span> <b>' + d.o.toFixed(1) + '</b>  <span class="g">C</span> <b>' + d.c.toFixed(1) + '</b><br>' +
    '<span class="g">H</span> <b>' + d.h.toFixed(1) + '</b>  <span class="g">L</span> <b>' + d.l.toFixed(1) + '</b>';
  tip.style.left = (cx / W * 100) + '%';
  tip.style.opacity = '1';
}

function hideCross() {
  var cross = document.getElementById('ckCross');
  if (cross) cross.style.opacity = '0';
  tip.style.opacity = '0';
}

build();