title: Chart.js - Multiple Doughnut Charts on same Canvas
body: <p>I´m trying to simulate a multi layer doughnut chart by initializing Chart.js multiple times over same canvas. There is only one chart visible at the time. The other will be visible when you hover over its position…</p>
  
  <p>Does somebody know how to make both visible at the same time?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Doughnut Chart&lt;/title&gt;
          &lt;script src="../Chart.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              body{
                  padding: 0;
                  margin: 0;
              }
              #canvas-holder-1{
                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -250px;
                margin-left: -250px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="canvas-holder-1"&gt;
              &lt;canvas id="chart-area" width="500" height="500"/&gt;
          &lt;/div&gt;
  &lt;script&gt;
  
          var doughnutData = [
                  {
                      value: 20,
                      color:"#F7464A",
                      highlight: "#FF5A5E",
                      label: "Red",
                  },
                  {
                      value: 50,
                      color: "#46BFBD",
                      highlight: "#5AD3D1",
                      label: "Green"
                  },
                  {
                      value: 30,
                      color: "#FDB45C",
                      highlight: "#FFC870",
                      label: "Yellow"
                  },
                  {
                      value: 40,
                      color: "#949FB1",
                      highlight: "#A8B3C5",
                      label: "Grey"
                  },
                  {
                      value: 120,
                      color: "#4D5360",
                      highlight: "#616774",
                      label: "Dark Grey"
                  }
  
              ];
              var doughnutData2 = [
                  {
                      value: 10,
                      color:"#F7464A",
                      highlight: "#FF5A5E",
                      label: "Red",
                  },
                  {
                      value: 100,
                      color: "#46BFBD",
                      highlight: "#5AD3D1",
                      label: "Green"
                  },
                  {
                      value: 20,
                      color: "#FDB45C",
                      highlight: "#FFC870",
                      label: "Yellow"
                  },
                  {
                      value: 60,
                      color: "#949FB1",
                      highlight: "#A8B3C5",
                      label: "Grey"
                  },
                  {
                      value: 120,
                      color: "#4D5360",
                      highlight: "#616774",
                      label: "Dark Grey"
                  }
  
              ];
  
              window.onload = function(){
                  var ctx = document.getElementById("chart-area").getContext("2d");
                  window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
                    responsive : false,
                    animateScale: false,
                    animateRotate:false,
                    animationEasing : "easeOutSine",
                    animationSteps : 80,
                    percentageInnerCutout : 90,
                  });
                myDoughnut.outerRadius= 200;
                  window.myDoughnut2 = new Chart(ctx).Doughnut(doughnutData2, {
                    responsive : false,
                    animateScale: false,
                    animateRotate:false,
                    animationEasing : "easeOutSine",
                    animationSteps : 80,
                    percentageInnerCutout : 90
                                    });
              };
  
  
  
      &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks,
  Jochen</p>