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?

Accepted Answer

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.

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

Solution

Problem