ChartJS number shows up on top of number - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

ChartJS number shows up on top of number

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(){/*from   www  .  ja  v  a2  s . c  o  m*/
Chart.pluginService.register({
   beforeDraw: function(chart) {
      var width = chart.chart.width,
         height = chart.chart.height,
         ctx = chart.chart.ctx;
      ctx.clearRect(0, 0, width, height);
      ctx.restore();
      var fontSize = (height / 114).toFixed(2);
      ctx.font = fontSize + "em lato";
      ctx.fillStyle = "rgba(0,0,0, 0.85)"
      ctx.textBaseline = "middle";
      var text = chart.id == 0 ? 60 : 40,
         textX = Math.round((width - ctx.measureText(text).width) / 2),
         textY = height / 2.5;
      ctx.fillText(text, textX, textY);
      ctx.save();
   }
});
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 ctx = document.getElementById("incompletions");
var myChart = new Chart(ctx, {
   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'
      }
   },
});
    }

      </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