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.).

tybro0103 · Accepted Answer · 2014-12-09T18:30:03.363

54

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

edited Dec 09 '14 at 18:30

answered Nov 01 '13 at 17:08

tybro0103

48,327
33
144
170

Any idea how to do this with a bar chart? it's not working. See demo: http://jsfiddle.net/a40a0bjy/ – M H Jun 16 '15 at 13:12
3

I noticed that thanks. What I am really trying to do is to have the chart grow as it has data. With mt demo if I have one bar, it expands it to a huge bar and if I have 100 bars they are all squished together. I want to to make the page grow and keep the padding between each bar. here is my question with no response yet. http://stackoverflow.com/questions/30868963/highcharts-bar-chart-auto-height – M H Jun 16 '15 at 15:30
If you aren't doing the position absolute, but just setting the height on a containing div (via css), do you need the height: 100%; width: 100% styles on an inside container? I have something like this
{chart rendered in here}
If I don't set 100%/100% on the chartContainer, the HighCharts doesn't seem to obey and overflows. http://jsfiddle.net/wkkAd/446/ – Terry Mar 21 '16 at 19:16
1

This answer is actually incorrect in my experience. Setting the width to null in highcharts will only cause the initial size to match the container but does not lead to responsive behavior. – user959690 Aug 10 '17 at 20:26

score 25 · Answer 2 · edited Jun 13 '13 at 08:14

25

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().

edited Jun 13 '13 at 08:14

Brewal

8,067
2
24
37

answered Jan 11 '12 at 01:56

Mark

106,305
20
172
230

1

I guess this works but it fails for the width of the chart if it's different than 100%. See this changed fiddle: http://jsfiddle.net/DdtsD/ – duality_ Jan 13 '12 at 17:19
2

@duality_, it works for the width if you set the chart reflow option to false. See here: http://jsfiddle.net/6MnFA/ – Mark Jan 14 '12 at 15:25
2

This should be debounced. Also, it's unnecessary: http://api.highcharts.com/highcharts#chart.height – tybro0103 Nov 01 '13 at 17:04

score 5 · Answer 3 · answered Jul 26 '18 at 00:23

5

When using percentage, the height it relative to the width and will dynamically change along with it:

chart: {
    height: (9 / 16 * 100) + '%' // 16:9 ratio
},

JSFiddle Highcharts with percentage height

answered Jul 26 '18 at 00:23

Phil

69
1
3

score 4 · Answer 4 · answered Sep 13 '13 at 04:30

4

Remove the height will fix your problem because highchart is responsive by design if you adjust your screen it will also re-size.

answered Sep 13 '13 at 04:30

RAM

91
1
10

1

Only on initial load, it will not be responsive. – user959690 Aug 10 '17 at 20:27

score 3 · Answer 5 · answered Jun 15 '13 at 22:34

Alternatively, you can directly use javascript's window.onresize

As example, my code (using scriptaculos) is :

window.onresize = function (){
    var w = $("form").getWidth() + "px";
    $('gfx').setStyle( { width : w } );
}

Where form is an html form on my webpage and gfx the highchart graphics.

ill · Answer 6 · 2018-06-25T13:30:22.590

3

Another good option is, to pass a renderTo HTML reference. If it is a string, the element by that id is used. Otherwise you can do:

chart: {
    renderTo: document.getElementById('container')
},

or with jquery:

chart: {
    renderTo: $('#container')[0]
},

Further information can be found here: https://api.highcharts.com/highstock/chart.renderTo

edited Jun 25 '18 at 13:30

answered Jun 25 '18 at 13:16

ill

352
2
4
23

score 0 · Answer 7 · answered Jul 06 '20 at 17:41

0

I had the same problem and I fixed it with:

<div id="container" style="width: 100%; height: 100%; position:absolute"></div>

The chart fits perfect to the browser even if I resize it. You can change the percentage according to your needs.

answered Jul 06 '20 at 17:41

Uriel Herrera

21
3

Highcharts - how to have a chart with dynamic height?

7 Answers7

Linked