Highcharts charts don't resize properly on window resize

Question

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>

Answer 1

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.