ChartJS number shows up for doughnut chart - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

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

Description

ChartJS number shows up for doughnut chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/* www.  ja  va  2  s . c o  m*/
var ctx = document.getElementById("completions");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['completions'],
        datasets: [{
            data: [60, 40],
            backgroundColor: [
                'rgba(255, 99, 132, 0.8)',
                'rgba(54, 162, 235, 0)',
            ],
            borderWidth: 0
        }]
    },
    options: {
        responsive: false,
        cutoutPercentage: 95,
        events: [],
        legend: {
            labels: {
                boxWidth: 0,
                fontSize: 30,
                fontColor: 'rgba(0,0,0, 0.80)',
            },
            position: 'bottom'
        }
    },
});
var ctx2 = document.getElementById("incompletions");
var myChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: ['incompletions'],
        datasets: [{
            data: [40, 60],
            backgroundColor: [
                'rgba(54, 162, 235, 0.8)',
                'rgba(255, 99, 132, 0)',
            ],
            borderWidth: 0
        }]
    },
    options: {
        responsive: false,
        cutoutPercentage: 95,
        events: [],
        legend: {
            labels: {
                boxWidth: 0,
                fontSize: 30,
                fontColor: 'rgba(0,0,0, 0.80)',
            },
            position: 'bottom'
        }
    },
});
var charts = [{
                     current: myChart
              , text: 60
              }, {
                     current: myChart2
              , text: 40
              }];
Chart.pluginService.register({
    beforeDraw: function(chart) {
          for (var iterator of charts) {
              var width = iterator.current.chart.width,
                  height = iterator.current.chart.height,
                  ctx = iterator.current.chart.ctx;
                var fontSize = (height / 114).toFixed(2);
                ctx.font = fontSize + "em lato";
                ctx.fillStyle = "rgba(0,0,0, 0.85)"
                ctx.textBaseline = "middle";
                var text = iterator.text,
                    textX = Math.round((width - ctx.measureText(text).width) / 2),
                    textY = height / 2.5;
                ctx.fillText(text, textX, textY);
                ctx.save();
        }
    }
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
      <canvas id="completions" height="240" width="240"></canvas> 
      <canvas id="incompletions" height="240" width="240"></canvas>  
   </body>
</html>

Related Tutorials