Issue in width of the chart

Question

I"m working on a project in which the design is similar to that of the one in the fiddle.

Side navigation of the left with toggle option and the chart on to the right side.

What's happening is the chart responsiveness is awesome and it's perfect when I resize the window.

But in the my project I have a toggle button to toggle the navigation bar in the left side which is working fine.

When I hide the navigation bar. The div width becomes 100% of the screen but the width of the chart remains the same unless I do some action on the window like re-sizing.

In the fiddle you can find the prob what I'm facing when you toggle the sidebar.

Note : border given to the div to indicate the width of the div on toggling the sidebar.

I did google on this but I found nothing.

If any of facing this same prob and found any solution. Please do help me out.

Thanks in advance.

Answer 1

The chart seem to be redrawn/resized on a window resize event so you could trigger that event after toggling the sidebar.

$('#toggle-button').click(function() {
    $('body').toggleClass('toggle-sidebar');
    $(window).resize();
})

Demo jsFiddle

Answer 2

You can call reflow function

http://jsfiddle.net/uBUv9/3/

http://api.highcharts.com/highcharts#Chart.reflow