Issue when resizing a hidden chart div that has padding

[Munksgaard]

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]

Hi @Munksgaard,
Thank you for reporting.

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

Demo:

• https://jsfiddle.net/BlackLabel/endwd8mL/

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