[Chartjs-v2.0] Infinite .resize() when scrollbar appears

[madmoizo]

https://jsfiddle.net/egnLh4a3/

Resize the chart window (horizontally) until scrollbar appears/disappears (on chrome), the chart starts to blink, it seems to be an infinite .resize()

[etimberg]

I've seen this before. I'm not entirely sure of the best way to fix it yet. The problem happens because the height of the chart causes the browser to add scrollbars which causes a resize which changes the height of the chart removing the need for scrollbars. This then continues indefinitely.

Some possible work-arounds:

• Show the scrollbars all the time
• Use max-width and max-height on the div containing the canvas to prevent the chart from getting too large

[Luca7993]

a possible solution is set responsive: false and resize the chart manually:
var myPieChart = new Chart($("#myChart"), { type: "pie", data: data, options: options }); $(window).bind("resize", function () { myPieChart.resize(); //resize the chart when the window size is changed }); myPieChart.resize(); //call it the first time

[etimberg]

I believe this was solved in #4596. Updated fiddle: https://jsfiddle.net/dacxtpkb/1/

@simonbrunel does this sound right?

[simonbrunel]

No, still an issue :\

[tofran]

Yes I can confirm, the error persists.

[simonbrunel]

Is there at least a way to fix that directly in Chart.js? We could try to detect infinite resize due to scrollbars that show, hide, ..., but it seems a bit hacky. Any idea of a more robust way to prevent that bug?

[etimberg]

The most ideal way to solve this IMO is to remove the scrollbars but still keep the scrolling behaviour. I don't think that is possible in a clean cross-browser way.

We could detect the oscillation and stop the loop but there's no guarantee that we'll only stop these cases.

[torontocode]

We fixed this by setting:
maintainAspectRatio: false
in the options which means the height is fixed.
It's not ideal but we found we could get a height that worked across all widths.
Trying to tinker with the scrollbars' behaviour meant we got into the tricky world of browser functionality which introduced unwanted side effects elsewhere.

[MaciejKus]

One solution that seems to work for me is to detect the size of the scroll bar of whatever browser the user is using (something like https://davidwalsh.name/detect-scrollbar-width). Then when a chart is resized detect if the scroll bar is visible, if it is not visible, then subtract the scroll bar width from the canvas width.

This way, if a scroll bar is visible, then the canvas size is drawn as it currently is. If a scroll bar is not visible, then the canvas is a few pixels more narrow (around 15px depending on the browser).

In essence, the canvas width is always set as if there is a scroll bar, making the chart a little bit more narrow.

I'm happy to create a pull request, but I'm not sure where to place the function that detects the scroll bar size of a browser. I was thinking putting that function in helpers.core.js, but any guidance is appreciated.

[simonbrunel]

@MaciejKus it should live in platform.dom.js since it's an issue specific to browsers (so involves manipulating DOM) and must be totally transparent to the core logic.

... the canvas width is always set as if there is a scroll bar, making the chart a little bit more narrow

That will not work, the extra space should only apply when scrollbars are visibles, it should not change the canvas size if scrollbars are not visible, else it will break lot of project layouts (e.g. charts side by side will get extra spacing).

This solution should work for all use cases, not only when charts take the full viewport width. Also this need to handle case where scrollbars are not in the immediate parent container or in the body.

[agris098]

My workaround for this problem was to set up a overlay to scrollbar.
CSS ( overflow-y: overlay ).
So that scrollbar width is not added to container, content width.

[ghost]

Is #6011 supposed to fix this issue? I am still able to replicate it when horizontal and vertical scroll bars show up simultaneously.