title: charts disappear if rendered in hidden divs
body: <p>I have two charts (created with charts.js) that I want to alternate between on the click of a button. </p>
  
  <p>Originally I had them each in separate divs with one hidden and one visible as follows:</p>
  
  <pre><code>&lt;div id="one"&gt;
      &lt;canvas id="myChart1" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;div id="two" class="hidden"&gt;
      &lt;canvas id="myChart2" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I remove the 'hidden' class, the chart will not display. </p>
  
  <p>Here is a JSFiddle: <a href="http://jsfiddle.net/2rzkpzy9/12/" rel="nofollow">http://jsfiddle.net/2rzkpzy9/12/</a></p>
  
  <p>Is there any way around this or another way to approach alternating between them?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data1 = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
          }]
  };
  var data2 = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "#FD6260",
              strokeColor: "#FD6260",
              pointColor: "#FD6260",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
          }]
  };
  
  var options = {
      scaleShowGridLines : false,
      scaleShowHorizontalLines: false,
      scaleShowVerticalLines: false,
   }
  
  var cxt = document.getElementById("myChart1").getContext("2d");
  var chart = new Chart(cxt).Bar(data1,options);
  
  var cxt2 = document.getElementById("myChart2").getContext("2d");
  var chart2 = new Chart(cxt2).Bar(data2,options);
          
  swap= function() {
       console.log(document.getElementById("one").className);
       document.getElementById("one").className = "hidden";
       document.getElementById("two").className = '';
      console.log(document.getElementById("one").className);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hidden {
      display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://www.chartjs.org/assets/Chart.js"&gt;&lt;/script&gt;
  &lt;div id="one"&gt;
      &lt;canvas id="myChart1" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;div id="two" class="hidden"&gt;
      &lt;canvas id="myChart2" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;button type="button" class="btn" onClick="swap()"&gt;Swap!&lt;/button&gt;
  &lt;div id="info"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>