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