Fill text for Doughnut Alt chart - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

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

Description

Fill text for Doughnut Alt 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" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from ww w  . j  a  va2s .  c  o m
var pieData = [
    {
        value: 300,
        color: "#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
]
var distributionChartData = [
    12,
    12,
    12,
    36
]
Chart.types.Doughnut.extend({
    name: "DoughnutAlt",
    draw: function () {
        Chart.types.Doughnut.prototype.draw.apply(this, arguments);
        this.chart.ctx.textBaseline = "middle";
        this.chart.ctx.fillStyle = 'black'
        this.chart.ctx.font = "50px Roboto";
        this.chart.ctx.textAlign = "center";
        this.chart.ctx.fillText(distributionChartData[3] + " %", 135, 120);
        this.chart.ctx.font = "20px Roboto";
        this.chart.ctx.fillText((distributionChartData[0] + distributionChartData[1] + distributionChartData[2]) + " Responses", 135, 160);
    }
});
var pieChart = document.getElementById("pieChart").getContext("2d");
new Chart(pieChart).DoughnutAlt(pieData, {
    percentageInnerCutout: 80, animationEasing: "easeOutQuart"
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="pieChart" width="270" height="270"></canvas>  
   </body>
</html>

Related Tutorials