Text at the center of Doughnut Chart - CanvasJS

Text at the center of 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%;position:relative;">
    <div id="chartContainer" style="height: 100%; width: 100%;"></div>
    <div class="total" id="total">300</div>
</div>

CSS

.total {
    margin: 0;    
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

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;