Responsive Highcharts not sizing correctly until window resize

Question

I\'m using Highcharts within Zurb\'s Foundation framework for a class project. I have three charts within a section tab. One is within a 12-column div, the other two are on the

Answer 1

You can add an event listener so your chart resizes every time it redraws:

mychart = new Highcharts.stockChart('div',   {
    chart: {
        events: {
            redraw: function(e) {
                mychart.reflow();
            }
        }
    },

Answer 2

only this worked for me

$(window).resize(function(){ 
    $scope.chartConfig.getChartObj().reflow() 
});

Answer 3

$(Highcharts.charts).each(function(i,chart){
    var height = chart.renderTo.clientHeight; 
    var width = chart.renderTo.clientWidth; 
    chart.setSize(width, height);
    });

it works for me

Answer 4

I got this from another answer, so give thegreyspot some credit in this question.

solution: call $(window).resize(); after the graph is loaded (or when you fill it with data)

Answer 5

In pure javascript multiple charts in single page resize issue on window resize

 window.onresize = function() {
    //- Remove empty charts if you are using multiple charts in single page 
    //- there may be empty charts
    Highcharts.charts = Highcharts.charts.filter(function(chart){
        return chart !== undefined;
    });

    Highcharts.charts.forEach(function(chart) {
        var height = chart.renderTo.chartHeight;
        //- If you want to preserve the actual height and only want to update 
        //- the width comment the above line.
        //- var height = chart.chartHeight; 
        var width = chart.renderTo.clientWidth;
        //- The third args is an animation set to true. 
        chart.setSize(width, height, true);
    });
};

We need this css code as well

.highcharts-container {
    width: 100%;
}
.highcharts-container svg {
    width: 100%;
    display: flex;
}

Answer 6

for me, it needed to take some delay and trigger the window resize.

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