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

User · Answer

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

User · Answer

I had the same problem and I fixed it with   lt div id  quot container quot  style  quot width  100   height  100   position absolute quot  gt  lt  div gt   The chart fits perfect to the browser even if I resize it  You can change the percentage according to your needs

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] Highcharts - how to have a chart with dynamic height?

Examples related to javascript

Examples related to highcharts