Highcharts - how to have a chart with dynamic height?

javascript highcharts
duality_ picture duality_ · Jan 10, 2012 · Viewed 118.6k times · Source

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

tybro0103 picture tybro0103 · Nov 1, 2013

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

Related questions

Removing highcharts.com credits link

I have just purchased highcharts, but the credits link still appears on my graphs which are quite prominent on my site and it distorts the chart view. I assumed I would get an option, so how do I remove it?

Read More
How to get highcharts dates in the x axis?

Is there a standard way to get dates on the x-axis for Highcharts? Can't find it in their documentation: http://www.highcharts.com/ref/#xAxis--type When my time range is large enough, it shows dates. However, when the time range …

Read More
Highcharts - redraw() vs. new Highcharts.chart

I'm struggling to understand the correct way to update a highcharts chart. Supposing I have rendered a chart, and then I want to update it in some way. For instance, I may want to change the values of the data …

Read More