make number in middle for only one chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

make number in middle for only one chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chartjs plugin</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from   w  ww  .  j av  a  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: {
        chartExtraOption: 1,
        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: {
        chartExtraOption: 2,
        responsive: false,
        cutoutPercentage: 95,
        events: [],
        legend: {
            labels: {
                boxWidth: 0,
                fontSize: 30,
                fontColor: 'rgba(0,0,0, 0.80)',
            },
            position: 'bottom'
        }
    },
});
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";
            if (chart.config.options.chartExtraOption == 1) {
                 var textX = Math.round((width-ctx.measureText(text).width)/1.1),
            textY = height / 2.5,
            text = 60;
              ctx.fillText(text, textX, textY);
            ctx.save();
          }
        else{
              var textX = Math.round((width-ctx.measureText(text).width)/1.1),
            textY = height / 2.5,
            text = 40;
              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