Chartjs-Chartjs-gauge create circumference until certain value from data

var data = [150, 200, 250, 300, 400];
colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522", "#808080"];
let sum = data.reduce(function(a, b) {
  return a + b;
}, 0);

var perc = 0;
perc_array = [];
for (i = 0; i < data.length; i++) {
  perc = (data[i] / sum * 100).toFixed(2);
  perc_array.push(perc);
}

Chart.plugins.register({ //increase distance between legend and chart
  id: 'paddingBelowLegends',
  beforeInit: function(chart, options) {
    chart.legend.afterFit = function() {
      this.height = this.height + 50; //custom 50 to value you wish
    };
  }
});
//when want to disable this plugin in other chart, paddingBelowLegends: false in plugin{}   
var config = {
  type: "doughnut",
  data: {
    labels: ['A', 'B', 'C', 'D', 'Others'],
    datasets: [{
      data: data,
      value: data[(colour_array.length - 1)], //300
      backgroundColor: colour_array,
      borderWidth: 2
    }]
  },
  options: {
    responsive: true,
    cutoutPercentage: 60,//thickness of chart
    title: {
      display: true,
      text: "Gauge chart with datalabels plugin"
    },
    layout: {
      padding: {
        bottom: 30
      }
    },
    valueLabel: {
      formatter: Math.round,
      display: false // hide the label in center of gauge
    },
    plugins: {
      beforeInit: function(chart, options) {
        chart.legend.afterFit = function() {
          this.height = this.height + 50;
        };
      },
      outlabels: {
        display: true,
        //text: '%l %v %p',//(label value percentage)the percentage automatically roundoff   
        //hide chart text label for last section-https://github.com/Neckster/chartjs-plugin-piechart-outlabels/issues/10#issuecomment-716606369    
        text: function(label) {
          console.log(label);
          highest_index = label['labels'].length - 1; //get highest index from the labels array
          current_index = label['dataIndex']; //current index
          value = label['dataset']['data'][label['dataIndex']]; //value of current index
          const v = parseFloat(label['percent']) * 100;
          if (current_index != highest_index) //to hide last section text label on chart.
          {
            //return value + ' , ' + `${v.toFixed(2)}%`;
            return value+',\n'+`${v.toFixed(2)}%`;
          } else {
            return false;
          }
        },

        color: 'white',
        stretch: 12, //length of stretching
        font: {
          resizable: true,
         minSize: 10,
         maxSize: 14
        },
        padding: {
          /*left:25,
          right: 0
          top:0,
          bottom:0*/
        }
      },
      //inner label:
      datalabels: { //label on arc section
        display: false,
        formatter: function(value, context) {
          if (value <= data[(colour_array.length - 2)]) //hide datalabel for last section
          {
            id = data.indexOf(value);
            perc = perc_array[id];
            return value + ' , ' + perc + '%';
          } else {
            return '';
          }
        },
        color: function(context) {
          return 'black';
        },
        borderWidth: 0,
        borderRadius: 10,
        font: {
          weight: "bold",
        },
        anchor: "end" //'center' (default): element center, 'start': lowest element boundary, 'end': highest element boundary
      }
    },
    legend: { //filter last section from legend chart labels
      display: true,
      //position: 'right',
      labels: {
        filter: function(legendItem, data) {
          //ori-return legendItem !=1;
          return !legendItem.text.includes('Others');
        },
        boxWidth: 20
      }
    },
    rotation: 1 * Math.PI,
    circumference: 1 * Math.PI,
    tooltips: {
      enabled: true,
      mode: 'single',
      filter: function(tooltipItem, data) { //disable display tooltip in last section
        var label = data.labels[tooltipItem.index];
        if (label == "Others") {
          return false;
        } else {
          return true;
        }
      },
      callbacks: { //custom tooltip text to show percentage amount (by default,showing real amount)
        label: function(tooltipItem, data) {
          var dataset = data.datasets[tooltipItem.datasetIndex];
          hovered_index = tooltipItem.index;
          data_length = data.datasets[0].data.length;
          var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
            return previousValue + currentValue;
          });
          var currentValue = dataset.data[tooltipItem.index];
          var percentage = (currentValue / total * 100).toFixed(2);
          return currentValue + ' , ' + percentage + "%";
        }
      }
    }
  }
};

window.onload = function() {
  var ctx = document.getElementById("chartJSContainer").getContext("2d");
  window.myGauge = new Chart(ctx, config);
};

<html>

<head>
  <script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script>
  <script src="https://unpkg.com/chartjs-gauge@0.3.0/dist/chartjs-gauge.js"></script>
  <script src="https://unpkg.com/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="canvas-holder" style="width:50% align:center">
    <canvas id="chartJSContainer"></canvas>
  </div>
</body>

</html>