ApexCharts Radial Bar Goal Rings — Free Activity Rings Snippet

<div class="arg-wrap">
  <div class="arg-card">
    <div class="arg-title">Weekly Goals</div>
    <div class="arg-sub">Each ring is progress toward its own target</div>
    <div class="arg-body">
      <div id="argChart"></div>
      <ul class="arg-list" id="argList"></ul>
    </div>
    <button class="arg-btn" id="argLog" type="button">Log a workout</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b1020;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.arg-wrap{width:100%;max-width:560px}
.arg-card{background:#131a2e;border:1px solid #1f2a44;border-radius:20px;padding:22px;color:#e2e8f0}
.arg-title{font-size:16px;font-weight:700}
.arg-sub{font-size:12px;color:#8b98b8;margin-top:3px}
.arg-body{display:flex;align-items:center;gap:8px;margin-top:6px}
#argChart{flex:0 0 270px}
.arg-list{list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}
.arg-list li{display:flex;align-items:center;gap:10px;font-size:13px}
.arg-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.arg-name{flex:1;color:#c7d0e6}
.arg-val{font-weight:700;font-variant-numeric:tabular-nums}
.arg-val small{color:#8b98b8;font-weight:500}
.arg-btn{margin-top:14px;width:100%;border:0;border-radius:12px;padding:11px;font:700 13px system-ui;background:#22c55e;color:#052e16;cursor:pointer}
.arg-btn:hover{filter:brightness(1.08)}
.arg-btn:focus-visible{outline:2px solid #86efac;outline-offset:2px}
@media (max-width:520px){.arg-body{flex-direction:column}#argChart{flex-basis:auto}}

var GOALS = [
  { name: 'Move',     unit: 'kcal', value: 1840, target: 2500, color: '#f43f5e' },
  { name: 'Exercise', unit: 'min',  value: 96,   target: 150,  color: '#22c55e' },
  { name: 'Stand',    unit: 'hrs',  value: 58,   target: 84,   color: '#38bdf8' },
];

// Radial bars take PERCENTAGES (0-100). The real values and targets stay in
// GOALS; only the ratio is handed to the chart. Values over target are
// capped at 100 so a ring never draws past a full circle.
function percents() {
  return GOALS.map(function (g) { return Math.min(100, Math.round((g.value / g.target) * 100)); });
}

function renderList() {
  document.getElementById('argList').innerHTML = GOALS.map(function (g) {
    return '<li><span class="arg-dot" style="background:' + g.color + '"></span>' +
      '<span class="arg-name">' + g.name + '</span>' +
      '<span class="arg-val">' + g.value.toLocaleString('en-US') + ' <small>/ ' + g.target.toLocaleString('en-US') + ' ' + g.unit + '</small></span></li>';
  }).join('');
}

var chart = new ApexCharts(document.getElementById('argChart'), {
  chart: { type: 'radialBar', height: 290, fontFamily: 'system-ui, sans-serif', animations: { speed: 700 } },
  series: percents(),
  labels: GOALS.map(function (g) { return g.name; }),
  colors: GOALS.map(function (g) { return g.color; }),
  plotOptions: {
    radialBar: {
      startAngle: 0,
      endAngle: 360,
      hollow: { size: '34%' },
      // The unfilled part of each ring. A dim version of the ring's own
      // colour reads better on dark backgrounds than a flat grey.
      track: { background: '#1f2a44', margin: 7, strokeWidth: '100%' },
      dataLabels: {
        name: { fontSize: '13px', color: '#8b98b8', offsetY: -6 },
        value: { fontSize: '22px', fontWeight: 800, color: '#f8fafc', offsetY: 4, formatter: function (v) { return v + '%'; } },
        // The centre shows an overall average until a ring is hovered.
        total: {
          show: true,
          label: 'Overall',
          color: '#8b98b8',
          formatter: function (w) {
            var s = w.globals.series;
            return Math.round(s.reduce(function (a, b) { return a + b; }, 0) / s.length) + '%';
          },
        },
      },
    },
  },
  stroke: { lineCap: 'round' },
  legend: { show: false },
});

chart.render();
renderList();

document.getElementById('argLog').addEventListener('click', function () {
  GOALS[0].value += 320;
  GOALS[1].value += 30;
  GOALS[2].value += 4;
  renderList();
  chart.updateSeries(percents());
});