Doughnut Chart cutout Property Doesn’t Maintain Expected Line Thickness
- Dominant language
- JavaScript
- Stars
- 67.7k
- Forks
- 11.9k
- Avg merge
- 7h 39m
- Merged PRs (30d)
- 5
Description
### Expected behavior
• The thickness of the doughnut ring should remain consistent when using cutout: '83%'.
• Changing the canvas size should not significantly alter the line thickness.
### Current behavior
• The thickness of the doughnut varies depending on the canvas size, making it difficult to achieve a fixed thickness (e.g., exactly 12px).
• Setting a pixel value for cutout (e.g., cutout: 180) does not behave as expected relative to the chart dimensions.
### Reproducible sample
Here is a minimal example to reproduce the issue:
### Optional extra steps/info to reproduce
1. Create a doughnut chart with the following configuration:
`new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [51.78, 120.88, 34.52, 103.57, 34.48],
backgroundColor: [
'#1A73E8',
'#EE1752',
'#00A995',
'#903AAE',
'#FFAE00'
],
borderWidth: 0
}]
},
options: {
responsive: false,
maintainAspectRatio: false,
animation: false,
events: [],
cutout: '83%', // Expected to control thickness
plugins: {
legend: { display: false },
tooltip: { enabled: false }
}
}
});`
2. Set the canvas size:
``
### Possible solution
• It would be useful to have a dedicated option for stroke thickness or ensure that cutout maintains a consistent thickness relative to the chart size.
Is this an intended behavior, or is there a way to enforce a fixed thickness properly?
Thanks in advance for your help! 🙏
### Context
_No response_
### chart.js version
4.4.8
### Browser name and version
Google Chrome, Version 134.0.6998.44 (Official Build) (arm64)
### Link to your project
_No response_
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.