title: ChartJS charts not generating within tabs
body: <p>I'm trying to use ChartsJS within a tabbing system. The first chart in the first tab is rendered, but subsequent charts are not.</p>
  
  <p>I believe this is because the tabs have <code>display:none</code>, so when the charts are first generated they are created in a div with zero dimensions.</p>
  
  <p>This fixes the issue, but breaks the tabs:</p>
  
  <pre><code>.vertical-nav&gt;div.tab-content {
      display: block !important;
  }
  </code></pre>
  
  <p>With that in mind I've tried all kinds of ways to regenerate the charts after the tab is open, or force <code>display:block</code> just before generating the chart. Nothing works.</p>
  
  <p>Here's my attempt to regenerate the charts:</p>
  
  <pre><code>jQuery(document).ready(function() {
  
      jQuery('.vertical-nav ul li span').click(function(){
  
          // Target the canvas within the correct tab
          var tabIndex = jQuery(this).parent().index();
          var canvasID = jQuery('.vertical-nav .tab-content:eq( ' + tabIndex + ' ) canvas').attr('id');
  
          theChart = charts[canvasID].chart;
          builtChart = charts[canvasID].builtChart;
  
          // Destroy all of the charts so that we can rebuild them
          for (var key in charts) {
              if (charts.hasOwnProperty(key)) {
                  charts[key].builtChart.destroy();
              }
          }
  
          // get the chart data and options from the charts object
          newData = charts[canvasID].data;
          newOptions = charts[canvasID].options;
  
          // create the new chart
          newChart = document.getElementById(canvasID).getContext("2d");
          new Chart(newChart).Line(newData, newOptions);
  
      });
  })
  </code></pre>
  
  <p>The staging site is: <a href="http://telcomplusplc.uberleaf.com/company/?tab=our-growth" rel="nofollow">http://telcomplusplc.uberleaf.com/company/?tab=our-growth</a></p>
  
  <p>I've even tried setting a timeout to delay the chart generation until the tab is displayed, but no luck.</p>
  
  <p>You can see in the URL above that the first chart generates and regenerates as it should. It's just the rest of them that don't (presumably because they are with a <code>display:none</code> div on first generation).</p>
  
  <p>Any help is much appreciated. Happy to give more info if needed.</p>
  
  <p>Update</p>
  
  <p>When the window is resized, the chart is redrawn. Here's the code for that (in chart.js):</p>
  
  <pre><code>// Attach global event to resize each chart instance when the browser resizes
  helpers.addEvent(window, "resize", (function(){
      // Basic debounce of resize function so it doesn't hurt performance when resizing browser.
      var timeout;
      return function(){
          clearTimeout(timeout);
          timeout = setTimeout(function(){
              each(Chart.instances,function(instance){
                  // If the responsive flag is set in the chart instance config
                  // Cascade the resize event down to the chart.
                  if (instance.options.responsive){
                      instance.resize(instance.render, true);
                  }
              });
          }, 50);
      };
  })());
  </code></pre>
  
  <p>I think what I need is to be able to fire that from a click function. I've tried an failed, my JS skills aren't that good.</p>