Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New doughnutLabel does not take spacing into account #952

Open
ThenTech opened this issue Oct 23, 2024 · 1 comment · May be fixed by #955
Open

New doughnutLabel does not take spacing into account #952

ThenTech opened this issue Oct 23, 2024 · 1 comment · May be fixed by #955

Comments

@ThenTech
Copy link

In #825, a centered doughnut label annotation was added, though the spacing option does not seem to reduce the label size, only the border and background sizes.

Ideally, I want to maximize the font size for the center label, while still keeping some padding around the label, so it doesn't hug the inside of the doughnut chart like it does now. Before the doughnutLabel annotation, I used my own plugin based on this StackOverflow answer, and there I can just add some padding around the label.

For example, with the text in blue, the background color in green, and in this case a spacing of 10, results in the background correctly getting padding, but the label is still the same size as if there was no spacing.

image


Additional bug: when increasing the spacing parameter until it becomes bigger than the innerRadius, results in the following error being thrown from the drawArc function:

IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-38.5) is negative.

As used here (with _radius):

ctx.arc(_centerX, _centerY, _radius, _startAngle, _endAngle, _counterclockwise);

Caused by this subtraction:

const _radius = innerRadius - space;


On another note, this function:

function getFitRatio({width, height}, radius) {
const hypo = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
return (radius * 2) / hypo;
}

could also use the built-in Math.hypot function, like so:

 function getFitRatio({width, height}, radius) { 
   return (radius * 2) / Math.hypot(width, height); 
 } 
@stockiNail stockiNail added this to the 3.1.1 milestone Oct 24, 2024
@stockiNail stockiNail removed this from the 3.1.1 milestone Nov 4, 2024
@stockiNail stockiNail linked a pull request Nov 4, 2024 that will close this issue
@stockiNail
Copy link
Collaborator

@ThenTech thank you very much for feedback! I have prepared a PR #955.
I need to test all possible cases (mainly when the circumference is <= 180 degrees. I'll set it "ready for review" asap.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants