Highchart not resized when hidden

Question

I've this AngularJS demo app using Highcharts: http://jsfiddle.net/dennismadsen/dpw8b8vv/1/

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <button ng-click="hideView()">1. Hide</button>
        <button ng-click="showView()">2. Show</button>
        <div id="container" ng-show="show">
            <highchart id="chart1" config="highchartsNG"></highchart>
        </div>
    </div>
</div>

If you change the width of the result view in JSFiddle, the Highchart will automatically resize it's width to the size of the container (the div with black border).

I've noticed that if Highchart is hidden, and the window is resized, it is not resized automatically (like iPad changing Landscape/Portrait orientation). Try this out by first clicing the "1. hide" button, change size of the result view, and then press the "2. show" button. See this example:

How can I force the highchart to resize even if it's not visible?

Answer 1

As per the documentation, we need to trigger the reflow method in scenarios where resize event cannot be captured by the chart.

Triggering reflow method in $timeout will render the chart properly.

$scope.showView = function () {
        $scope.show = true;
        $timeout(function () {
            $scope.highchartsNG.getHighcharts().reflow()
        });
    }

Working Fiddle

Answer 2

I think it's a correct behaviour.

But considering that the resize event event fix the graph size, you can trigger a resize after the graph is shown, like:

setTimeout(function () {
    $(window).trigger('resize');
}, 1);

It's the jQuery way, I think there's an angular too, but I'm not familiar with it.