I am not able to show dotted circle for percentage

1👍

You can just add the necesarry amount of datapoints to represent the percentage and then color the amount you need for that percentage to be colored.

Example of 60% being colored:

var options = {
  type: 'doughnut',
  data: {
    labels: ["10", "10", "10", "10", "10", "10", "10", "10", "10", "10"],
    datasets: [{
      label: '# of Votes',
      data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
      cutout: 280,
      borderWidth: 5,
      backgroundColor: ["lightBlue", "lightBlue", "lightBlue", "lightBlue", "lightBlue", "lightBlue", "grey", "grey", "grey", "grey"]
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>

Leave a comment