title: Chart.js render in hidden Bootsrap tab
body: <p>this is driving me mad, I am using Chart.js in my bootstrap tabs but they will not render because the width is set to zero when the DOM is loaded.
  I finally found this out after trying and figuring out why my graph was not there!</p>
  
  <p>I've searched online and nothing seemed to fix my issue, can anybody please help me with this, I think I need some script that renders the graph when the tab is selected and succesfully loaded
  Im using this JS:</p>
  
  <pre><code>var data = [
  {
      value: 300,
      color:"#F7464A",
      highlight: "#FF5A5E",
      label: "Red"
  },
  {
      value: 50,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Green"
  },
  {
      value: 100,
      color: "#FDB45C",
      highlight: "#FFC870",
      label: "Yellow"
  }
  ];
  var options = {
     responsive : true,
     animation: true,
  };
  
  var ctx1 = $("#invest-chart").get(0).getContext("2d");
  var invest_chart;
  new Chart(ctx1).Doughnut(data,  {
     responsive : true,
     animation: true,
  });
  </code></pre>
  
  <p>Along with this html piece in my tab:</p>
  
  <pre><code>&lt;canvas id="invest-chart"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Thanks guys!</p>