chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.67k stars 11.91k forks source link

Inconsistent Doughnut Arc Spacing #10059

Open jjstanton opened 2 years ago

jjstanton commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

image

ArthurGorbenko commented 1 year ago

Facing the same issue

cotwitch commented 1 year ago

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

spaghettiguru commented 1 year ago

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 commented 1 year ago

Still an issue. Any plans fixing this?

jasperdunn commented 1 year ago

Still an issue

Screenshot 2023-08-31 at 10 29 22 am
datasets: {
        doughnut: {
          borderWidth: 0,
          spacing: 2,
        },
      },
jjstanton commented 1 year ago

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

pablovargasosorio commented 5 months ago

Same issue here: Captura de pantalla 2024-05-09 a las 12 14 42

JamesTheAlchemist commented 2 months ago

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 }}