title: Highcharts - Hidden charts don't get re-size properly
body: <p>I currently have a 3 tabbed page. Each tab is a div that is set to <code>display: hidden</code> 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. <strong>Can I call a function that will resize all the charts on the page when I make my tab switch?</strong></p>
  
  <p>It looks like this: 
  <img src="https://i.stack.imgur.com/NtiY6.png" alt="How it looks"> </p>
  
  <p>when it should look like this: 
  <img src="https://i.stack.imgur.com/K0XEv.png" alt="How it should look"></p>
  
  <p>EDIT:
  Seems like this isn't a problem directly related to highcharts, for example my google maps looks like this: 
  <img src="https://i.stack.imgur.com/WbEvt.png" alt="How Google Maps looks"> </p>
  
  <p>but when I resize the window it adjusts correctly: 
  <img src="https://i.stack.imgur.com/LUnKF.png" alt="How Google Maps looks after resize"> </p>
  
  <p>Can I make CSS refresh/adjust my grids through a function call in JS when the tab gets switched?</p>