Update Text at the center of Doughnut Chart on mouseover- CanvasJS

Update Text at the center of Doughnut Chart on mouseover- 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 ", mouseover:updateValue },
			{  y: 805, indexLabel: "Q2 - 805", mouseover:updateValue },
			{  y: 342, indexLabel: "Q3 - 342", mouseover:updateValue },
			{  y: 123,  indexLabel: "Q4 - 123", mouseover:updateValue },
					 
        ]
      }
      ]
    });

 chart.render();

function updateValue(e){
    document.getElementById("total").innerHTML = e.dataPoint.y;
}
         
                               
document.getElementById("total").innerHTML = 1245;