Böyle bir çemberim mevcut içeride ki renkleri girdiğim % ye göre şekillensin istiyorum bunu nasıl yapabilirim

<div class="page__group">
                <div class="widget widget_stat widget_shadow widget_after">
                  <div class="widget__chart widget__chart_items">
                    <div id="chart-earnings-by-item"></div>
                  </div>
                  <div class="widget__title">Satış Analizi</div>
                  <div class="widget__text widget__text_mb40">Satış Analizi</div>
                  <div class="widget__legend">
                    <div class="widget__color">
                      <div class="widget__bg" style="background: #6C5DD3;"></div>
                      <div class="widget__text">Ticari</div>
                    </div>
                    <div class="widget__color">
                      <div class="widget__bg" style="background: #e4e4e4;"></div>
                      <div class="widget__text">Konut</div>
                    </div>
                    <div class="widget__color">
                      <div class="widget__bg" style="background: #FFA2C0;"></div>
                      <div class="widget__text">Arsa</div>
                    </div>
                  </div>
                </div>
              </div>

// colors
var blue = '#A0D7E7';
var blueLight = '#0e97b5';
var purple = '#6C5DD3';
var white = '#ffffff';
// var blueOpacity = '#e6efff';
// var blueLight = '#50B5FF';
var pink = '#FFB7F5';
// var orangeOpacity = '#fff5ed';
var yellow = '#FFCE73';
var green = '#7FBA7A';
var red = '#FF754C';
// var greenOpacity = '#ecfbf5';
var gray = '#808191';
var grayOpacity = '#f2f2f2';
// var grayLight = '#E2E2EA';
var borderColor = "#E4E4E4";
// var text = "#171725";


// chart earnings by item
(function () {
  var options = {
    series: [22, 37, 41],
    colors: [purple, pink, borderColor],
    chart: {
      height: '100%',
      type: 'donut'
    },
    plotOptions: {
      pie: {
        donut: {
          size: '71%',
          polygons: {
            strokeWidth: 0
          }
        },
        expandOnClick: false
      }
    },
    dataLabels: {
      enabled: false
    },
    states: {
      hover: {
        filter: {
          type: 'darken',
          value: 0.9
        }
      }
    },
    legend: {
      show: false
    },
    tooltip: {
      enabled: false
    }
  };

  var chart = document.querySelector('#chart-earnings-by-item');
  if (chart != null) {
    new ApexCharts(chart, options).render();
  }
})();