How to add text inside the doughnut chart - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

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

Description

How to add text inside the doughnut chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js 2.1</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/* w  w  w  .  j a  v a 2  s  . com*/
   Chart.pluginService.register({
      beforeDraw: function (chart) {
         if (chart.config.options.elements.center) {
        //Get ctx from string
        var ctx = chart.chart.ctx;
            //Get options from the center object in options
        var centerConfig = chart.config.options.elements.center;
         var fontStyle = centerConfig.fontStyle || 'Arial';
            var txt = centerConfig.text;
        var color = centerConfig.color || '#000';
        var sidePadding = centerConfig.sidePadding || 20;
        var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2)
        //Start with a base font of 30px
        ctx.font = "30px " + fontStyle;
            //Get the width of the string and also the width of the element minus 10 to give it 5px side padding
        var stringWidth = ctx.measureText(txt).width;
        var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
        // Find out how much the font can grow in width.
        var widthRatio = elementWidth / stringWidth;
        var newFontSize = Math.floor(30 * widthRatio);
        var elementHeight = (chart.innerRadius * 2);
        // Pick a new font size so it will not be larger than the height of label.
        var fontSizeToUse = Math.min(newFontSize, elementHeight);
            //Set font settings to draw it correctly.
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
        var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
        ctx.font = fontSizeToUse+"px " + fontStyle;
        ctx.fillStyle = color;
        //Draw text in center
        ctx.fillText(txt, centerX, centerY);
         }
      }
   });
      var config = {
         type: 'doughnut',
         data: {
            labels: [
              "Red",
              "Green",
              "Yellow"
            ],
            datasets: [{
               data: [300, 50, 100],
               backgroundColor: [
                 "#FF6384",
                 "#36A2EB",
                 "#FFCE56"
               ],
               hoverBackgroundColor: [
                 "#FF6384",
                 "#36A2EB",
                 "#FFCE56"
               ]
            }]
         },
      options: {
         elements: {
            center: {
               text: '90%',
          color: '#FF6384', // Default is #000000
          fontStyle: 'Arial', // Default is Arial
          sidePadding: 20 // Defualt is 20 (as a percentage)
            }
         }
      }
   };
      var ctx = document.getElementById("myChart").getContext("2d");
      var myChart = new Chart(ctx, config);
    }

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

Related Tutorials