Open
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:
<canvas id="storageChart" width="216" height="216"></canvas>
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