Pie Chart — HTML CSS JS SVG Pie Chart (No Library)

<div class="pc-card">
  <div class="pc-head">
    <h3>Traffic by source</h3>
    <span class="pc-total" id="pcTotal"></span>
  </div>
  <div class="pc-body">
    <svg class="pc-svg" id="pcSvg" viewBox="0 0 200 200" role="img" aria-label="Pie chart of traffic by source"></svg>
    <ul class="pc-legend" id="pcLegend"></ul>
  </div>
  <div class="pc-tip" id="pcTip" 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}

.pc-card{position:relative;background:#fff;border-radius:16px;padding:22px;width:100%;max-width:420px;box-shadow:0 18px 44px rgba(15,23,42,.08)}
.pc-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.pc-head h3{font-size:16px;font-weight:800;color:#0f172a}
.pc-total{font-size:12.5px;font-weight:700;color:#94a3b8}

.pc-body{display:flex;align-items:center;gap:20px}
.pc-svg{width:160px;height:160px;flex-shrink:0;overflow:visible}
.pc-slice{cursor:pointer;transition:opacity .15s;transform-origin:100px 100px}
.pc-slice:hover{opacity:.85}

.pc-legend{list-style:none;display:flex;flex-direction:column;gap:9px;flex:1}
.pc-legend li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#475569;cursor:pointer}
.pc-legend li.mute{opacity:.4}
.pc-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.pc-name{font-weight:600}
.pc-val{margin-left:auto;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums}

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

var DATA = [
  { name: 'Organic search', value: 4820, color: '#6366f1' },
  { name: 'Direct',         value: 2410, color: '#22c55e' },
  { name: 'Social',         value: 1560, color: '#f59e0b' },
  { name: 'Referral',       value: 980,  color: '#ec4899' },
  { name: 'Email',          value: 540,  color: '#0ea5e9' },
];

var svg = document.getElementById('pcSvg');
var legend = document.getElementById('pcLegend');
var tip = document.getElementById('pcTip');
var card = document.querySelector('.pc-card');
var SVGNS = 'http://www.w3.org/2000/svg';
var CX = 100, CY = 100, R = 92;
var hidden = {};

function total() {
  return DATA.reduce(function (s, d) { return hidden[d.name] ? s : s + d.value; }, 0);
}

// Point on the circle for a given fraction (0..1), starting at 12 o'clock.
function point(frac) {
  var a = frac * Math.PI * 2 - Math.PI / 2;
  return [CX + R * Math.cos(a), CY + R * Math.sin(a)];
}

function slicePath(start, end) {
  var p0 = point(start), p1 = point(end);
  var large = end - start > 0.5 ? 1 : 0;
  // Move to centre, line to arc start, arc to end, close — a filled wedge.
  return 'M' + CX + ',' + CY + ' L' + p0[0].toFixed(2) + ',' + p0[1].toFixed(2) +
    ' A' + R + ',' + R + ' 0 ' + large + ' 1 ' + p1[0].toFixed(2) + ',' + p1[1].toFixed(2) + ' Z';
}

function render() {
  var sum = total();
  document.getElementById('pcTotal').textContent = sum.toLocaleString() + ' visits';
  svg.innerHTML = '';
  var acc = 0;
  DATA.forEach(function (d) {
    if (hidden[d.name]) return;
    var frac = d.value / sum;
    var start = acc, end = acc + frac;
    acc = end;
    var path = document.createElementNS(SVGNS, 'path');
    path.setAttribute('class', 'pc-slice');
    path.setAttribute('fill', d.color);
    path.setAttribute('d', slicePath(start, end));
    path.dataset.name = d.name;
    path.dataset.value = d.value;
    path.dataset.pct = (frac * 100).toFixed(1);
    svg.appendChild(path);
  });
  // Legend (always lists every series so muted ones can be toggled back on).
  legend.innerHTML = DATA.map(function (d) {
    return '<li data-name="' + d.name + '" class="' + (hidden[d.name] ? 'mute' : '') + '">' +
      '<span class="pc-dot" style="background:' + d.color + '"></span>' +
      '<span class="pc-name">' + d.name + '</span>' +
      '<span class="pc-val">' + d.value.toLocaleString() + '</span></li>';
  }).join('');
}

svg.addEventListener('mousemove', function (e) {
  var slice = e.target.closest('.pc-slice');
  if (!slice) { tip.hidden = true; return; }
  var r = card.getBoundingClientRect();
  tip.innerHTML = slice.dataset.name + ': <b>' + Number(slice.dataset.value).toLocaleString() + '</b> (' + slice.dataset.pct + '%)';
  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; });

legend.addEventListener('click', function (e) {
  var li = e.target.closest('li');
  if (!li) return;
  var name = li.dataset.name;
  // Don't allow hiding the last visible slice.
  var visible = DATA.filter(function (d) { return !hidden[d.name]; }).length;
  if (!hidden[name] && visible <= 1) return;
  hidden[name] = !hidden[name];
  render();
});

render();