chartjs / chartjs/chartjs-plugin-annotation

New doughnutLabel does not take spacing into account

Open
#952 1 comment 0 reactions 0 assignees View on GitHub
bug enhancement
Dominant language
JavaScript
Stars
623
Forks
377
PR merge metrics
No merged PRs in 30d

Description

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](https://stackoverflow.com/questions/20966817/how-to-add-text-inside-the-doughnut-chart-using-chart-js), 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](https://github.com/user-attachments/assets/c9973d39-008a-4988-838b-8f06e389eb3c)

------

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`):
https://github.com/chartjs/chartjs-plugin-annotation/blob/0d6246df894560217ed2bf5ce1ded050b400f3df/src/types/doughnutLabel.js#L188

Caused by this subtraction:
https://github.com/chartjs/chartjs-plugin-annotation/blob/0d6246df894560217ed2bf5ce1ded050b400f3df/src/types/doughnutLabel.js#L139

------

On another note, this function:
https://github.com/chartjs/chartjs-plugin-annotation/blob/0d6246df894560217ed2bf5ce1ded050b400f3df/src/types/doughnutLabel.js#L157-L160

could also use the built-in `Math.hypot` function, like so:
```javascript
function getFitRatio({width, height}, radius) {
return (radius * 2) / Math.hypot(width, height);
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.