Highcharts - how to have a chart with dynamic height?

Question

I want to have a chart that resizes with the browser window, but the problem is that the height is fixed to 400px. This JSFiddle example has the same problem.

How can I do that? I tried using the chart.events.redraw event handler to resize the chart (using .setSize), but I guess it starts a never-ending loop (fire event handler, which calls setSize, which fires another event handler, etc.).

Answer 1

Just don't set the height property in HighCharts and it will handle it dynamically for you so long as you set a height on the chart's containing element. It can be a fixed number or a even a percent if position is absolute.

Highcharts docs:

By default the height is calculated from the offset height of the containing element

Example: http://jsfiddle.net/wkkAd/149/

#container {     height:100%;     width:100%;     position:absolute; } 

Answer 2

What if you hooked the window resize event:

$(window).resize(function()  {         chart.setSize(        $(document).width(),         $(document).height()/2,        false     );    }); 

See example fiddle here.

Highcharts API Reference : setSize().