Doughnut chart, in some cases if quantity is 1, its showing without back ground color, but color sho-CodePudding

I have a doughnut chart in chartjs, with 5 data types. ie "Overdue", "Waiting for me to sign", "Waiting for partner to sign", "In progress" and "Pending". It has corresponding values of 112, 140, 35, 3 and 1 with background colour #FF4657", "#FFD336", "#00DCFF", "#00C597" and"#0062FF". In this case when i produce the graph for pending data which has a value of 1, is showing without any background colour. But interesting thing is while hovering its showing with correct colour

labels = ["Overdue", "Waiting for me to sign", "Waiting for partner to sign", "In progress", "Pending"];
backgroundColor = ["#FF4657", "#FFD336", "#00DCFF", "#00C597", "#0062FF"];
data = [ 112, 140, 35, 3, 1];

This is the data proportion which gives me this issue. Here is the image

And when I zoom in i get this, you can see a narrow blue line there Any help will be appreciated

CodePudding user response：

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>