Chart Js doughnut chart breaking when handling great differences in values

๐Ÿ‘:-2

The spacing: -50 property is causing this, as the spacing is negative the tip of the bar overlaps at the end of the next bar, when you place a bar with a value much higher than the others, it overlaps all the others. We can better observe the behavior by removing the border-radius:

enter image description here

So the solution is to adjust the value of the spacing property, in case any value of your data array is too much higher than the others, as we can see:

enter image description here

Leave a comment