<svg id="chart" viewBox="0 0 300 300" fill="none"></svg>

svg {
  width: 300px;
  height: 300px;
}

const chart = [
  { val: 42, color: "red" },
  { val: 22, color: "green" },
  { val: 8, color: "blue" },
  { val: 33, color: "orange" },
  { val: 6, color: "gray" }
];

const chartEl = document.getElementById("chart");
const { width, height } = chartEl.viewBox.baseVal;

const radius = Math.min(width, height) / 4;
const length = 2 * Math.PI * radius;

const sum = chart.reduce((acc, v) => (acc += v.val), 0);

for (let i = 0, prev = 0; i < chart.length; i++) {
  const seg = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  seg.setAttribute("r", radius);
  seg.setAttribute("cx", width / 2);
  seg.setAttribute("cy", height / 2);

  const pct = chart[i].val / sum;

  seg.setAttribute("stroke-dasharray", `${length * pct} ${length}`);
  seg.setAttribute("stroke-dashoffset", -length * prev);
  seg.setAttribute("stroke-width", radius * 2);
  seg.setAttribute("stroke", chart[i].color);

  chartEl.appendChild(seg);
  prev += pct;
}