I have 2 side-by-side charts on my page, and would like to have them resized when window is resized: their container is set to 50% width, which, according to examples, should be enough.
A working example of automatically resizing chart can be found @ http://jsfiddle.net/2gtpA/
A non-working example I did to reproduce the issue can be seen @ http://jsfiddle.net/4rrZw/2/
NOTE: you have to resize the frame several times to reproduce the issue (smaller>bigger>smaller should do)
I think it all lies in the way you declare containers... pasting the HTML code as the JS code for highcharts doesn't seem to be relevant here... (same in both examples)
<table style="width:100%;">
<tr>
<td style="width:50%;">
<div id="container" style="height: 50%"></div>
</td>
<td style="width:50%;"></td>
</tr>
</table>
You can avoid using javascript to perform the resize and rely on css instead. This can be accomplished by rendering the HighChart into a div that has:
position: absolute;
width: 100%;
To make sure that the height of the container is appropriate, you'll have to wrap this absolutely positioned element in another element that has explicitly set height:
position: relative;
width: 100%;
height: 400px;
By rendering the HighChart into a position absolute element, the chart will be responsive to width reductions in the parent.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With