Chart.js: 1.0.2 - devicePixelRatio causes `responsive:true` to result in the wrong size (growing chart)

[mattbasta]

When the browser has a devicePixelRatio, a CSS height and width are defined on the canvas. The physical height of the element (clientHeight) is determined by this height. When the resize method runs, it updates the canvas.height property to resize the element. If the device's devicePixelRatio is greater than 1, what that means is that the height is set to a value greater than it should be set.

The net result is that resizing the element causes it to grow on each resize event.

[bettiolo]

:+1: I am being plagued by the same problem.

[fulldecent]

Hello, today I am closing all issues that are only affecting version 1 of Chart.js as WONTFIX.

If this issue does affect version 2 as well, I apologize for the error. Please create a test case against Chart.js 2 using on of the below websites and we will be happy to reopen the issue and update its classification:

• http://jsbin.com/
• http://jsfiddle.net/
• http://codepen.io/pen/
• Premade template: http://codepen.io/pen?template=JXVYzq

[KristopherWagner]

I experience this issue in version 2.5.0

[tiwari-abhishek]

still exists in 2.7.3

[simonbrunel]

@tiwari-abhishek are you able to share a codepen/jsfiddle that reproduces this issue in 2.7.3?

[asrz]

I'm having a similar issue where my chart grows out of control on page load.
It seems to be related to the generateLegend() function.

https://jsfiddle.net/up9beo1v/58/

[jigs1996]

I have the same issue @fulldecent chart growing

[jbee]

Same issue, triggered by floating component sibling to the div wrapping the canvas.

[brodjustice]

FWIW: In my case it I could set "maintainAspectRatio":true to stop the height growing.

[sagive]

For me wrapping with a div classed "relative" helped.

[TheoOliveira]

For me wrapping with a div classed "relative" helped.

chartJs has any css class with the relative that is used? I just want to understand why this works.

[KristopherWagner]

@TheoOliveira It's part of their documentation: https://www.chartjs.org/docs/latest/general/responsive.html#important-note