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

Issue when resizing a hidden chart div that has padding #8377

Closed
Munksgaard opened this Issue May 24, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@Munksgaard
Contributor

Munksgaard commented May 24, 2018

I have a graph in a div that is sometimes hidden. When resizing the window containing the div while it is hidden, the graph does not come back when the div is shown again. It seems like this only happens if the graph has padding.

Here's an example without padding:

https://jsfiddle.net/k435w62o/3/

If you click hide, resize the window a bit and then click show, the graph comes back.

Here is an example with padding:

https://jsfiddle.net/k435w62o/2/

Doing the same steps as above, you should see that the graph does not come back when you try to show it again. You can resize the window once more to make it appear.

Product version

Highcharts JS v6.1.0 (2018-04-13)

Affected browser(s)

Chrome and Firefox

@sebastianbochan

This comment has been minimized.

Contributor

sebastianbochan commented May 25, 2018

Hi @Munksgaard,
Thank you for reporting.

Workaround
Call chart.reflow() when chart is show.

Demo:

Internal note
Lets consider this condition https://github.com/highcharts/highcharts/blob/master/js/parts/Chart.js#L1171

When padding is 0, width and height are 0 and all works properly. In case when padding is declared as i.e 2px, width and height are negative and the code is run. As a resultchart.setSize(undefined, undefined, false) hides chart permanently.
I see two solutions:

  • add to condition width >=0 && height >=0
  • modify setSize function
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment