<div class="chart_pie_wrap">
  <svg class="chart_pie" width="180" height="180">
    <!-- chart -->
    <circle class="pie_circle pie_circle1" cx="90" cy="90" r="65"></circle>
    <circle class="pie_circle pie_circle2" cx="90" cy="90" r="65"></circle>
    <circle class="pie_circle pie_circle3" cx="90" cy="90" r="65"></circle>
    <circle class="pie_circle pie_circle4" cx="90" cy="90" r="65"></circle>
    <!-- chart bg circle -->
    <circle class="pie_circle pie_bg" cx="90" cy="90" r="65"></circle>
    <!-- // chart -->
  </svg>
</div>

<ul class="chart_cate">
  <li class="chart_item1">item1 <span></span>%</li>
  <li class="chart_item2">item2 <span></span>%</li>
  <li class="chart_item3">item3 <span></span>%</li>
  <li class="chart_item4">item4 <span></span>%</li>
</ul>
.chart_pie_wrap {
  width: 180px;
  height: 180px;
  transform: scaleX(-1);
  transform-origin: center;
  margin: 50px auto 32px;
  .chart_pie {
    transform: rotate(-90deg);
    transform-origin: center;
  }
  .pie_circle {
    transform-origin: center;
    fill: none;
    stroke-width: 50;
    &.pie_bg {
      stroke: #f3f4f5;
      stroke-width: 51;
      stroke-dasharray: (2 * 3.1415926536 * 65);
      stroke-dashoffset: 0;
      animation: chartLoad 1s forwards;
      transform: scaleX(-1) rotate(-180deg);
    }
    &.pie_circle1 {
      stroke: #7734e2;
      transform: rotate(0deg);
    }
    &.pie_circle2 {
      stroke: #2474e2;
    }
    &.pie_circle3 {
      stroke: #17e3d4;
    }
    &.pie_circle4 {
      stroke: #ff7e1f;
    }
  }
}
.chart_cate {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 9px;
  max-width: 241px;
  margin: 0 auto 32px;
  li {
    width: calc((100% - 9px) / 2);
    &:before {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-bottom: -1px;
      margin-right: 9px;
    }
  }
  .chart_item1 {
    &:before {
      background-color: #7734e2;
    }
  }
  .chart_item2 {
    &:before {
      background-color: #2474e2;
    }
  }
  .chart_item3 {
    &:before {
      background-color: #17e3d4;
    }
  }
  .chart_item4 {
    &:before {
      background-color: #ff7e1f;
    }
  }
}
@keyframes chartLoad {
  100% {
    stroke-dashoffset: 2 * 3.1415926536 * 65;
  }
}
View Compiled 
  const chartData = [50, 20, 25, 5]; // 차트 데이터
  const pieR = 65, // R값
        formula = (2 * 3.1415926536 * pieR);
  let rotateFormula = 0;
  const chartTextAll = document.querySelectorAll('.chart_cate li')
chartData.forEach((el, i) => {
    idx = i + 1;
    document.querySelector(`.pie_circle.pie_circle${idx}`).setAttribute('stroke-dashoffset', formula - (formula * (chartData[i]/100)));
    document.querySelector(`.pie_circle.pie_circle${idx}`).setAttribute('stroke-dasharray', formula);
    if (i !== 0) rotateFormula += chartData[i - 1];
    document.querySelector(`.pie_circle.pie_circle${idx}`).style.transform = `rotate(${3.6 * rotateFormula}deg)`;
  chartTextAll[i].querySelector('span').innerText = chartData[i];
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.