Skip to content

Use integer canvas dimensions - #12142

Merged
LeeLenaleee merged 1 commit into
chartjs:masterfrom
joshkel:integer-canvas
Nov 16, 2025
Merged

LeeLenaleee merged 1 commit into
chartjs:masterfrom
joshkel:integer-canvas

Conversation

@joshkel

@joshkel joshkel commented Oct 28, 2025 •

Copy link
Copy Markdown
Contributor

As a result of #12097, the HTMLCanvasElement's width and height (which are always integers - see MDN) may be compared to fractional deviceWidth and deviceHeight, resulting in extra resize and update events being fired.

This PR rounds the dimensions for purposes of comparing to the canvas element's, which should put the behavior closer to Chart.js 4.5.0 and earlier.

I've tested this against #11224, my own code (which was generating errors due to an interaction between these extra events and some internal plugins), and https://codepen.io/joshkel/pen/azdjLGZ, and it seems to work.

Fixes #12143

As a result of chartjs#12097, the HTMLCanvasElement's `width` and `height` (which are always integers - see [MDN][1]) may be compared to fractional `deviceWidth` and `deviceHeight`, resulting in extra resize and update events being fired.

This PR rounds the dimensions for purposes of comparing to the canvas element's, which should put the behavior closer to Chart.js 4.5.0 and earlier.

I've tested this against chartjs#11224, my own code (which was generating errors due to an interaction between these extra events and some internal plugins), and https://codepen.io/joshkel/pen/azdjLGZ, and it seems to work.

[1]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement#instance_properties
@LeeLenaleee LeeLenaleee added this to the Version 4.6.0 milestone Nov 16, 2025
@LeeLenaleee
LeeLenaleee merged commit 2898a6d into chartjs:master Nov 16, 2025
3 checks passed
@joshkel
joshkel deleted the integer-canvas branch November 17, 2025 14:07
pika-02-03 added a commit to Open-Chat-Graph/Open-Chat-Graph that referenced this pull request Feb 23, 2026
Chart.js 4.5.1の既知のリグレッション(chartjs/Chart.js#12143)により、
キャンバスが小数ピクセル幅を持つ場合に余分なresizeイベントが発生し、
onResizeコールバック内のchart.resize()と連鎖して無限ループが発生する。
また初回レンダー時の余分なリサイズにより起動アニメーションも消失する。

修正PR(chartjs/Chart.js#12142)が未リリースのため4.4.7に固定して回避。

Co-Authored-By: Claude Opus 4.6 <[email protected]>
pika-02-03 added a commit to Open-Chat-Graph/Open-Chat-Graph that referenced this pull request Jun 10, 2026
Chart.js 4.5.1の既知のリグレッション(chartjs/Chart.js#12143)により、
キャンバスが小数ピクセル幅を持つ場合に余分なresizeイベントが発生し、
onResizeコールバック内のchart.resize()と連鎖して無限ループが発生する。
また初回レンダー時の余分なリサイズにより起動アニメーションも消失する。

修正PR(chartjs/Chart.js#12142)が未リリースのため4.4.7に固定して回避。

Co-Authored-By: Claude Opus 4.6 <[email protected]>
@Sergiobop

Copy link
Copy Markdown

Is this ever going to be released?
Bugged for months already..

ErkoRisthein added a commit to TulevaEE/onboarding-client that referenced this pull request Oct 25, 2026
… stale width and soft

chart.js 4.5.1 sizes the canvas with fractional CSS pixels over a whole-pixel bitmap. On desktop widths the tax-win and growth charts then ignore the first resize after loading, so the growth bar runs into its legend and the tax-win chart leaves an empty strip, and all four calculator charts draw slightly blurred and skip their entry animation. 4.6.0 switches back to integer canvas dimensions (chartjs/Chart.js#12142), so it can replace this hold once it has been checked against these pages.
ErkoRisthein added a commit to TulevaEE/onboarding-client that referenced this pull request Nov 3, 2026
… stale width and soft

chart.js 4.5.1 sizes the canvas with fractional CSS pixels over a whole-pixel bitmap. On desktop widths the tax-win and growth charts then ignore the first resize after loading, so the growth bar runs into its legend and the tax-win chart leaves an empty strip, and all four calculator charts draw slightly blurred and skip their entry animation. 4.6.0 switches back to integer canvas dimensions (chartjs/Chart.js#12142), so it can replace this hold once it has been checked against these pages.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Changes to resize events and animation in 4.5.1

4 participants