New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
frlinw opened this Issue Mar 13, 2016 · 11 comments

Comments

Projects
None yet
9 participants
@frlinw

frlinw commented Mar 13, 2016

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()

blinkedchart

@frlinw frlinw changed the title from [Chartjs-v2.0] charts turn crazy when scrollbar appears to [Chartjs-v2.0] Infinite .resize() when scrollbar appears Mar 13, 2016

@etimberg

This comment has been minimized.

Member

etimberg commented Mar 13, 2016

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

This comment has been minimized.

Luca7993 commented Nov 2, 2016

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

This comment has been minimized.

Member

etimberg commented Aug 20, 2017

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

@simonbrunel does this sound right?

@simonbrunel

This comment has been minimized.

Member

simonbrunel commented Aug 20, 2017

No, still an issue :\

@tofran

This comment has been minimized.

tofran commented Aug 20, 2017

Yes I can confirm, the error persists.
Graph flickering

@simonbrunel

This comment has been minimized.

Member

simonbrunel commented Aug 23, 2017

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

This comment has been minimized.

Member

etimberg commented Aug 23, 2017

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.

@simonbrunel simonbrunel modified the milestone: Version 2.7 Sep 10, 2017

@torontocode

This comment has been minimized.

torontocode commented Oct 4, 2017

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

This comment has been minimized.

MaciejKus commented Dec 9, 2017

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

This comment has been minimized.

Member

simonbrunel commented Dec 14, 2017

@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

This comment has been minimized.

agris098 commented May 25, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment