Doughnut chart, in some cases if quantity is 1, its showing without back ground color, but color shows correctly while hovering

by

1👍

✅

The border is being drawn over all of the arcs, so because the value is so small in comparrison with the other values it already has a low percentage and with the border drawn over it, it becomes pixel work and it cant go smaller as 1 pixel so it will start drawing the border over it.

So you can either put the borderWidth to 0 or check the data before visualizing it and remove any data that is soo small that it doesnt visualize correctly.

var options = {
  type: 'doughnut',
  data: {
    labels: ["Overdue", "Waiting for me to sign", "Waiting for partner to sign", "In progress", "Pending"],
    datasets: [{
      backgroundColor: ["#FF4657", "#FFD336", "#00DCFF", "#00C597", "#0062FF"],
      data: [112, 140, 35, 3, 1],
      borderWidth: 0
    }]
  },
  options: {
  }
}

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

enter image description here

Leave a comment