susy compass - Highcharts - Hidden charts don't get re-size properly

Question

I currently have a 3 tabbed page. Each tab is a div that is set to display: hidden when not selected. In these tabs I have a Grid system created with Susy (compass plugin). Also each tab page has a set of Highcharts. When I load the page, depending on which tab is in the URl, one of the tabs is loaded. All of the charts look fine, however when I switch to a different tab, some of the charts are not fitting correctly in their div. If I just re-size the window, the charts are recalculated and then they fit perfectly. Or if I reload that same tab, the charts fit fine too. Can I call a function that will resize all the charts on the page when I make my tab switch?

It looks like this:

when it should look like this:

EDIT: Seems like this isn't a problem directly related to highcharts, for example my google maps looks like this:

but when I resize the window it adjusts correctly:

Can I make CSS refresh/adjust my grids through a function call in JS when the tab gets switched?

Answer 1

What worked for me is calling:

$(window).resize();

When I load a new tab. Still having the issues with the Google Maps API, but it works great with Highcharts.