Doughnut chart inside Doughnut chart - CanvasJS JavaScript Charts

Doughnut chart inside Doughnut chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="parent">
  <div id="doughnutContainer" uniqueID ='doughnut'></div>
  <div id="doughnutContainer1" uniqueID ='doughnut1'></div>
</div>

CSS

#parent {
  position: relative;
}

#doughnutContainer, #doughnutContainer1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  z-index: 1 !important;
}
#doughnutContainer {
  width:800px;
  height:250px;
}
#doughnutContainer1 {
  transform: translate(-50%, 28%);
  width:150px; 
  height:160px;
}

.canvasjs-chart-tooltip {
  z-index: 100000  !important;
}

JavaScript

var chart1 = new CanvasJS.Chart("doughnutContainer", {        
  data: [
    {
      type: "doughnut",
      dataPoints: [
        { y: 71 },
        { y: 55 },
        { y: 50 },
        { y: 65 },
        { y: 95 },
        { y: 68 },
        { y: 28 },
        { y: 34 },
        { y: 14 }
      ]
    },

  ]
});
var chart2 = new CanvasJS.Chart("doughnutContainer1", {        
  backgroundColor: "transparent",
  data: [
    {
      type: "doughnut",
      dataPoints: [
        { y: 71 },
        { y: 55 },
        { y: 50 },
        { y: 65 },
        { y: 95 },
        { y: 68 },
        { y: 28 },
        { y: 34 },
        { y: 14 }
      ]
    }
  ]
});

chart1.render();
chart2.render();

$("#doughnutContainer1").hover(function(){
        $("#doughnutContainer .canvasjs-chart-tooltip").hide();
    }
);

$("#doughnutContainer").hover(function(){
        $("#doughnutContainer1 .canvasjs-chart-tooltip").hide();
    }
);