Inconsistent Doughnut Arc Spacing

[jjstanton]

Expected behavior

Consistent spacing between arcs greater than 1. If only one arc, no spacing is required.

Current behavior

Inconsistent spacing between arcs and spacing on singular arcs.

Reproducible sample

https://codepen.io/JJStanton/pen/YzrjRVw

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v3.7.0

Browser name and version

Chrome - Version 97.0.4692.71

Link to your project

No response

[etimberg]

To fix this we probably need to change how the spacing works. Right now it moves the arcs away from the center of the canvas by the spacing amount. Thus is doesn't provide any guarantees about what the space between the ends of the arc is. If we want to provide a consistent spacing in that direction we'll need to shrink the angles to create the space rather than moving the arcs away from the center

[cotwitch]

Just reached this issue. I'm also unable to code graph in a following way :(

[ArthurGorbenko]

Facing the same issue

[cotwitch]

I’ve ended up using default spacing while letting poor graphic designer screaming in agony.

[spaghettiguru]

As a possible workaround you can interlace values with the 'spacer' values and use transparent background color on them. This works better for thinner doughnuts. See my comment here https://github.com/chartjs/Chart.js/issues/10286#issuecomment-1410946775

[sammyaxe]

Still an issue. Any plans fixing this?

[jasperdunn]

Still an issue

datasets: {
        doughnut: {
          borderWidth: 0,
          spacing: 2,
        },
      },

[jjstanton]

@etimberg Any chance we can have this item looked at?

[pablovargasosorio]

Same issue here:

[JamesTheAlchemist]

Until we can get some time to sit down and 'math' this thing out, I have a temporary workaround which includes adding an additional slice into the doughnut with a transparent color. Tweak to your heart's desire.

data={{ datasets: [{ data: ['650', '200', '30', '150'], backgroundColor: [ 'red', 'blue', 'transparent', 'green', ], borderRadius: 50, spacing: 25, }] }}

Also, as a weird side effect of this spacing issue I have noticed that the bottom left and bottom right points of the arch don't line up something. So I changed my rotation from 90 to 92 to visually 'fix' this.

options={{ rotation: -92, circumference: 180 }}