Sunburst Chart — Hierarchical Ring Chart in SVG

<div class="sb-card">
  <h3>Storage by category</h3>
  <div class="sb-wrap">
    <svg class="sb-svg" id="sbSvg" viewBox="0 0 220 220" aria-label="Sunburst chart"></svg>
    <div class="sb-center" id="sbCenter"><strong id="sbVal">100%</strong><span id="sbCap">Total</span></div>
  </div>
  <div class="sb-legend" id="sbLegend"></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;display:flex;justify-content:center;padding:30px 18px}

.sb-card{background:#1e293b;border:1px solid #334155;border-radius:16px;padding:20px;width:100%;max-width:340px;text-align:center}
.sb-card h3{font-size:15px;font-weight:800;color:#f1f5f9;margin-bottom:12px}
.sb-wrap{position:relative;width:220px;height:220px;margin:0 auto}
.sb-svg{width:220px;height:220px}
.sb-seg{cursor:pointer;transition:opacity .12s,transform .12s;transform-origin:110px 110px}
.sb-seg:hover{opacity:.85}
.sb-seg.is-dim{opacity:.25}
.sb-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.sb-center strong{font-size:26px;font-weight:800;color:#f1f5f9;font-variant-numeric:tabular-nums}
.sb-center span{font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;max-width:120px}

.sb-legend{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin-top:14px}
.sb-leg{display:flex;align-items:center;gap:6px;font-size:12px;color:#cbd5e1}
.sb-leg span{width:10px;height:10px;border-radius:3px}

var DATA = [
  { name:'Media', color:'#6366f1', children:[ {name:'Photos',value:38}, {name:'Video',value:22}, {name:'Audio',value:8} ] },
  { name:'Docs', color:'#22d3ee', children:[ {name:'PDFs',value:14}, {name:'Sheets',value:9} ] },
  { name:'Apps', color:'#f59e0b', children:[ {name:'System',value:11}, {name:'Games',value:6} ] },
  { name:'Other', color:'#a855f7', children:[ {name:'Cache',value:7}, {name:'Misc',value:5} ] }
];
var ns = 'http://www.w3.org/2000/svg';
var CX = 110, CY = 110, R0 = 34, R1 = 70, R2 = 104;
var svg = document.getElementById('sbSvg');
var valEl = document.getElementById('sbVal'), capEl = document.getElementById('sbCap');

function shade(hex, amt) {
  var n = parseInt(hex.slice(1), 16);
  var r = Math.min(255, ((n >> 16) & 255) + amt), g = Math.min(255, ((n >> 8) & 255) + amt), b = Math.min(255, (n & 255) + amt);
  return 'rgb(' + r + ',' + g + ',' + b + ')';
}
function polar(r, a) { return [CX + r * Math.cos(a - Math.PI / 2), CY + r * Math.sin(a - Math.PI / 2)]; }
function sector(rIn, rOut, a0, a1) {
  var p0 = polar(rOut, a0), p1 = polar(rOut, a1), p2 = polar(rIn, a1), p3 = polar(rIn, a0);
  var large = (a1 - a0) > Math.PI ? 1 : 0;
  return 'M' + p0[0] + ' ' + p0[1] + ' A' + rOut + ' ' + rOut + ' 0 ' + large + ' 1 ' + p1[0] + ' ' + p1[1] +
         ' L' + p2[0] + ' ' + p2[1] + ' A' + rIn + ' ' + rIn + ' 0 ' + large + ' 0 ' + p3[0] + ' ' + p3[1] + ' Z';
}

var total = 0;
DATA.forEach(function (p) { p.value = p.children.reduce(function (s, c) { return s + c.value; }, 0); total += p.value; });
var segs = [];

function addSeg(d, color, label, value) {
  var path = document.createElementNS(ns, 'path');
  path.setAttribute('class', 'sb-seg'); path.setAttribute('d', d); path.setAttribute('fill', color);
  path.setAttribute('stroke', '#1e293b'); path.setAttribute('stroke-width', '1.5');
  path.addEventListener('mouseenter', function () { focus(label, value); });
  svg.appendChild(path);
  segs.push(path);
  return path;
}

function focus(label, value) {
  valEl.textContent = Math.round(value / total * 100) + '%';
  capEl.textContent = label;
}
function reset() { valEl.textContent = '100%'; capEl.textContent = 'Total'; segs.forEach(function (s) { s.classList.remove('is-dim'); }); }

var angle = 0;
DATA.forEach(function (p) {
  var span = p.value / total * Math.PI * 2;
  var a0 = angle, a1 = angle + span;
  addSeg(sector(R0, R1, a0, a1), p.color, p.name, p.value);
  // outer ring: children within the parent's span
  var ca = a0;
  p.children.forEach(function (c, ci) {
    var cspan = c.value / total * Math.PI * 2;
    addSeg(sector(R1, R2, ca, ca + cspan), shade(p.color, 24 + ci * 14), p.name + ' › ' + c.name, c.value);
    ca += cspan;
  });
  angle = a1;
});

svg.addEventListener('mouseleave', reset);
document.getElementById('sbLegend').innerHTML = DATA.map(function (p) { return '<span class="sb-leg"><span style="background:' + p.color + '"></span>' + p.name + '</span>'; }).join('');