Pie chart inside Doughnut chart - CanvasJS JavaScript Charts

Pie 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="pieContainer" uniqueID ='pie'></div>
</div>

CSS

#parent {
  position: relative;
}

#doughnutContainer, #pieContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
#doughnutContainer {
  width:800px;
  height:250px;
}
#pieContainer {
  transform: translate(-50%, 28%);
  width:200px; 
  height:160px;
}

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("pieContainer",
{        
	backgroundColor: "transparent",
	data: [
	{
		type: "pie",
		dataPoints: [
			{ y: 71 },
			{ y: 55 },
			{ y: 50 },
			{ y: 65 },
			{ y: 95 },
			{ y: 68 },
			{ y: 28 },
			{ y: 34 },
			{ y: 14 }
		]
	}
 	]
});

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