Showing text in the middle of a doughnut chart - CanvasJS

Showing text in the middle of a doughnut chart - CanvasJS

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div style="background-color:white">
<div >
  <h2>
    GrapeCity CE Reports
  </h2>
  <p>
    Hover over the image for more!
  </p>
</div>
<div class="a" id="wrapper" style="height: 360px; width: 400px;">
    <div id="chartContainer" style="height: 100%; width: 100%;"></div>
    <div id="total" style="position:absolute;left:0px;top:0px;height:360px;width:400px;text-align:center;color:grey;font-size:22px;"><img class="image" src="https://i.imgur.com/kxoRpPC.png" alt="" width="180" height="180">
    <div class="middle">
      <div class="text">
        I'm always watching...
      </div>
    </div></div>
</div>
</div>
<iframe width="0" height="0" src="https://www.youtube.com/embed/4d0Ku_TpcW8?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

CSS

.image {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin:10px 0 0 -83px;
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.image:hover {
  opacity: 0.8;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.middle:hover {
  opacity:1;
}
.text {
  color: black;
  font-size: 16px;
  font-family: "Comic Sans MS";
  padding: 16px 32px;
  margin-top:180px;
  margin-left:-10px;
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
  		animationEnabled: true,
      theme: 'dark2',
      data: [
      {
        type: "doughnut",
					 dataPoints: [
					 {  y: 100,  indexLabel: "Wijmo", indexLabelFontFamily: "Comic Sans MS", indexLabelFontStyle: "italic", exploded: true },
					 {  y: 100, indexLabel: "C1 Studio", indexLabelFontFamily: "Comic Sans MS", indexLabelFontStyle: "italic" },
					 {  y: 100, indexLabel: "Spread", indexLabelFontFamily: "Comic Sans MS", indexLabelFontStyle: "italic" },
					 {  y: 100,  indexLabel: "Active", indexLabelFontFamily: "Comic Sans MS", indexLabelFontStyle: "italic", exploded: true },
					 
        ]
      }
      ]
    });

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