Showing text in the middle of a doughnut chart - CanvasJS

Showing text in the middle of a doughnut chart - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="wrapper" style="height: 360px; width: 100%;">
    <div id="chartContainer" style="height: 100%; width: 100%;"></div>
    <div id="total" style="position:absolute;left:0px;top:0px;height:100%;width:100%;line-height:360px;text-align:center;color:grey;font-size:22px;">300</div>
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
        
      data: [
      {
        type: "doughnut",
					 dataPoints: [
					 {  y: 1245,  indexLabel: "Q1 - 1,245 " },
					 {  y: 805, indexLabel: "Q2 - 805" },
					 {  y: 342, indexLabel: "Q3 - 342" },
					 {  y: 123,  indexLabel: "Q4 - 123" },
					 
        ]
      }
      ]
    });

 chart.render();
        
          
var dps = chart.options.data[0].dataPoints;
var sum = 0;     
        
for(var i = 0; i < dps.length; i++){
        
   sum += dps[i].y;                
        
}
                               
document.getElementById("total").innerHTML = sum;