Highcharts Demo

author(s): Torstein Hønsi

by Umesh Patil

HTML

<script src="https://github.highcharts.com/highcharts.js"></script>

<div id="viewport">
    <div class="container">
        <div id="topchart1"></div>
        <div id="topchart2"></div>
        <div id="topchart3"></div>
        <div id="topchart4"></div>
    </div>
    <button onclick="_resizeTablet()">Resize 400</button>
</div>

CSS

body {
    margin: 0px;
}

#viewport {
    overflow: hidden;
    width: 1200px;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    /*overflow: hidden;*/
}

.container>div {
    flex-grow: 1;
    flex-basis: 25%;
}

JavaScript

// Generic plugin that adds support for listening to container resize rather than
// window resize. As of 2018 only Chrome supports ResizeObserver.
Highcharts.wrap(Highcharts.Chart.prototype, 'setReflow', function(proceed, reflow) {

	var chart = this;

    proceed.call(this, reflow);

    if (reflow !== false && typeof ResizeObserver === 'function') {
    	
        // Unbind window.onresize handler so we don't do double redraws
        if (this.unbindReflow) {
        	this.unbindReflow();
        }
    
        var ro = new ResizeObserver(function () {
            chart.reflow();
        });
        
        ro.observe(this.renderTo);
    }
});

var chartConf = {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
}
Highcharts.chart('topchart1', chartConf);
Highcharts.chart('topchart2', chartConf);
Highcharts.chart('topchart3', chartConf);
Highcharts.chart('topchart4', chartConf);

function _resizeTablet() {
    document.getElementById("viewport").style.width = "400px";
}