Doughnut Chart size is decreasing automatically when mouse hover or click

[nataliiabyk]

Expected behavior

Current behavior

Optional extra steps/info to reproduce

No response

Possible solution

I suspect it's because devicePixelRatio, but if I set it to 1 the canvas quality is worse

Context

my chart options in Vue.js 2
options: { layout: { padding: 40, }, responsive: false, maintainAspectRatio: false, animation: { animateScale: true, }, plugins: { legend: { display: this.isLegend, }, tooltip: { enabled: this.chartType === 'single', }, }, },

chart.js version

v4.2.1

Browser name and version

Mozilla Firefox

Link to your project

No response

[Pikamander2]

We were having a similar issue where opening or closing Chrome's dev console was causing the graph to visually break.

We were able to resolve it by removing this line from options:

devicePixelRatio: 4,

Related threads for convenience:

• Chart shrinking excessively when browser zoom not set to 100% #10890
• Chart shrinking uncontrollably on browser zoom #11089
• All chart examples are decreasing in size when pixelRatio is non-terminating value #11224
• Doughnut Chart size is decreasing automatically when mouse hover or click #11304
• Please can #10890 be reopened as it's not fixed? #11547

[Pikamander2]

Calling mychart.resize() also reproduces the bad scaling issue.