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

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;
}