chartjs / chartjs/Chart.js

Doughnut Chart cutout Property Doesn’t Maintain Expected Line Thickness

Open
#12,044 1 comment 1 reaction 0 assignees View on GitHub
type: bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.