Fill Text when hovering the doughnut chart - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Doughnut Chart

Description

Fill Text when hovering the doughnut chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Chart JS snippet - Dipak Raval(dkrvl2011)</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
      <style id="compiled-css" type="text/css">

canvas{//from w  w  w .j  a v a 2 s .co m
   width:200px;
   height:auto;
   margin:0 auto;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var options = {
  cutoutPercentage: 75,
  rotation: Math.PI,
  animation: {
    animateScale: true,
    onComplete: function() {
      var width = this.chart.width,
        height = this.chart.height;
      var fontSize = (height / 114).toFixed(2);
      this.chart.ctx.font = fontSize + "em Verdana";
      this.chart.ctx.textBaseline = "middle";
      var text = "82%",
        textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
        textY = height / 2;
        console.log(textY);
        console.log(textX);
      this.chart.ctx.fillText(doughnutData.datasets[0].data[0] + "%", textX, textY);
    }
  },
  legend: {
    display: true,
  },
  tooltips: {
    enabled: true,
  },
};
var doughnutData = {
  labels: [
    "Red",
    "Blue",
    "Yellow"
  ],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ],
    hoverBackgroundColor: [
      "#84FF63",
      "#EBA236",
      "#CE56FF"
    ]
  }]
};
$('#riskFactorChartLoading').hide("fast");
var ctx = $("#riskFactorChart").get(0).getContext("2d");
var riskFactorChart = new Chart(ctx, {
  type: 'doughnut',
  data: doughnutData,
  options: options
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="riskFactorChart"></canvas>  
   </body>
</html>

Related Tutorials