score:0

updating to the latest v2 (2.9.4) version of chart.js will resolve your issue:

// chart colors 
var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb'];
var donutoptions = {
  cutoutpercentage: 65,
  responsive: true,

  legend: {
    position: 'right',
    padding: 2,
    labels: {
      pointstyle: 'circle',
      usepointstyle: true,
    }
  }
};
// donut 1
var chdonutdata1 = {
  labels: ['product 1', 'product 2', 'product 3', 'product 4'],
  datasets: [{
    backgroundcolor: colors.slice(0, 4),
    borderwidth: 2,
    data: [74, 11, 40, 20]
  }],


};

var chdonut1 = document.getelementbyid("chdonut1");
if (chdonut1) {
  new chart(chdonut1, {
    type: 'pie',
    data: chdonutdata1,
    options: donutoptions
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.js"></script>

<div class="">
  <canvas id="chdonut1"></canvas>
</div>


Related Query

More Query from same tag