Resize height with Highcharts

Question

I have a Highchart which resizes the width beatuifully when the window change size. But not the height. I tried this set chart size but it's not working proberly. Is there any other way to automatically change the height when window change size?

This is my css code for the output. I have a Jquery UI tab, the other tab is showing the datatable

#output-container {     float: right;     display: inline;     position: absolute;     right: 10px;      left: 400px;     top:120px;     overflow-y: auto; } 

This is my css for the chartdiv:

#chartContainer{     margin: auto; } 

And this is the js Chart function:

function qchart(){     chart = new Highcharts.Chart({         chart: {             renderTo: 'chartContainer',             type: 'column',             spacingBottom: 3,             //height: (screen.availHeight)-500,             marginRight: 30,             marginBottom: 30,             reflow: true         },         //etc..     };     //... } 

Answer 1

Ricardo's answer is correct, however: sometimes you may find yourself in a situation where the container simply doesn't resize as desired as the browser window changes size, thus not allowing highcharts to resize itself.

This always works:

1. Set up a timed and pipelined resize event listener. Example with 500ms on jsFiddle
2. use chart.setSize(width, height, doAnimation = true); in your actual resize function to set the height and width dynamically
3. Set reflow: false in the highcharts-options and of course set height and width explicitly on creation. As we'll be doing our own resize event handling there's no need Highcharts hooks in another one.

Answer 2

According to the API Reference:

By default the height is calculated from the offset height of the containing element. Defaults to null.

So, you can control it's height according to the parent div using redraw event, which is called when it changes it's size.

References

• http://api.highcharts.com/highstock#chart.height
• http://api.highcharts.com/highstock#chart.events.redraw