Highcharts Responsive Height

author(s): Torstein Hønsi

by Behseini

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="box">
<div id="container"></div>
</div>

CSS

html, body {
    height:100%;
}
#box {
    height:80%;
    background:#331266;
}
#container {
    position:relative;
height:100%;
}

JavaScript

var chart1;
$(function() {
      var newh = $("#box").height();
    
            $( window ).resize(function() {

          newh = $("#box").height();
        chart1.redraw();
        chart1.reflow();
});
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container'
         },

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