Open adityagoel28 opened 2 years ago
Can't seem to reproduce it, please add a reproducable sample as required by the issue template
Here is the test case, as you can see the offsets are not equal. https://jsfiddle.net/b4Lynka9/
The offset is implemented as follows:
(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
How do I implement equal spacing between the arcs, can you show an example please?
@etimberg
I have the same need. A pie chart with all spacing equal.
Is there any way to achieve that now?
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.
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).
Same here
datasets: {
doughnut: {
borderWidth: 0,
spacing: 2,
},
},
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,
},
]
looks like this issue is still open.
+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])
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