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.
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);
} 
In #825, a centered doughnut label annotation was added, though the
spacingoption 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
doughnutLabelannotation, 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.
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:
As used here (with
_radius):chartjs-plugin-annotation/src/types/doughnutLabel.js
Line 188 in 0d6246d
Caused by this subtraction:
chartjs-plugin-annotation/src/types/doughnutLabel.js
Line 139 in 0d6246d
On another note, this function:
chartjs-plugin-annotation/src/types/doughnutLabel.js
Lines 157 to 160 in 0d6246d
could also use the built-in
Math.hypotfunction, like so: