title: Highcharts dynamic (re-)sizing in AngularJS tabs
body: <p>My application displays HighCharts charts in various tabs (using AngularJS). Note that the charts are re-generated on the fly <strong>every time a tab is selected</strong> (Meaning that Angular "removes or recreates a portion of the DOM tree" every time).</p>
  
  <p>My problem is that the size of the chart is correct <em>only the first time</em> I click on a tab. When I switch tabs, the charts that are created largely exceed the size of their container. Surprisingly, the charts are correctly resized after a window resize (i.e. when <code>chart.reflow()</code> is called).</p>
  
  <p>So I tried the following, which did not help:</p>
  
  <pre><code>$(element).highcharts({
      chart: {
        type: 'scatter',
        zoomType: 'xy',
        events: {
          load: function () {
            this.reflow();
          }
        }
      },
      ...
  </code></pre>
  
  <p>Finally, the following did work, but it feels like a hack.</p>
  
  <pre><code>$(element).highcharts({
      chart: {
        type: 'scatter',
        zoomType: 'xy',
        events: {
          load: function () {
            var chart = this;
            setTimeout(function () { chart.reflow(); }, 0);
          }
        }
      },
      ...
  </code></pre>
  
  <p>Any idea where the problem comes from? I am spending hours on this, and this is pretty frustrating...</p>
  
  <p>EDIT: I have another related question: By default my charts have a given size, but I have an "enlarge" button to make them take the full space. The button simply toggles a CSS class to do that. However, doing this does <strong>not</strong> trigger a resize event, and so does not trigger a reflow. So I have the same problem of charts not filling their container.</p>
  
  <p>Here is a fiddle to demonstrate the issue:
  <a href="http://jsfiddle.net/swaek268/3/">http://jsfiddle.net/swaek268/3/</a></p>
  
  <p>Again, I have found a way around the problem, but it feels like an even bigger hack.</p>
  
  <pre><code>var width = 0;
  var planreflow = function(){
    setTimeout(function(){
        if(width!==$('#container').width()){
            $('#container').highcharts().reflow(); 
            console.log('reflow!')
        }
        width = $('#container').width();
        planreflow();
    }, 10);
  };
  planreflow();
  </code></pre>