Pie chart offset not equal

[adityagoel28]

Expected behavior

Offset should be equal in all.

Current behavior

Pie chart offset between the slices is not equal, as shown in the image. Please tell how to resolve this.

Reproducible sample

None

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v3.7.1

Browser name and version

No response

Link to your project

No response

[LeeLenaleee]

Can't seem to reproduce it, please add a reproducable sample as required by the issue template

[adityagoel28]

Here is the test case, as you can see the offsets are not equal. https://jsfiddle.net/b4Lynka9/

[etimberg]

The offset is implemented as follows:

1. Compute the angle in the middle of the arc segment
2. Translate the arc along a line through that angle away from the center of the canvas by (offset / 2)

This implementation means that the space between arcs is not constant, nor is it designed to be. I'm not sure what to do here, but it seems like the spacing option might be the better one to use

[adityagoel28]

How do I implement equal spacing between the arcs, can you show an example please?

[ForeshadowRU]

@etimberg I have the same need. A pie chart with all spacing equal.

Is there any way to achieve that now?

[DerrickWanglf]

Hi @etimberg, I also have same need. We need the offset and hover offset when interacting with pie chart. spacing does work in our case.

[spaghettiguru]

I was able to achieve something similar to equal spacing (works better for thinner doughnuts) by interlacing data values with the some fixed 'space' value (1 in my case) and interlacing colors with 'transparent' value. Here is the code: https://codepen.io/spagettiguru/pen/abjRqoM

Note that if you are using tooltips or labels you will have to make sure you don't show these for spacing arcs (tooltips are handled in the example).

[jasperdunn]

Same here

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

[IdoBK]

Hey, any update on this? Experiencing the same issue

datasets: [
      {
        data: dataAsPercentages.map(({ value }) => value),
        backgroundColor: dataAsPercentages.map(({ asset_type }) => ASSET_TYPE_TO_COLOR[asset_type]),
        spacing: 5,
        borderRadius: 0,
        borderWidth: 0,
      },
    ]

[vamshinenu]

looks like this issue is still open.

[TimChinye]

+1 Really would like a fix to this, seems like a no-brainer...

@spaghettiguru's solution works but is certainly a workaround to an issue.

To add to their solution though, you can dynamically interlace 1 and 'transparent' using: <Array>.flatMap(num => [1, num]) and <Array>.flatMap(color => ['transparent', color])