Char.js to show labels by default in pie chart - Javascript Chart.js

Javascript examples for Chart.js:Pie Chart

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

Description

Char.js to show labels by default in pie 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://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//w  w  w  .j  a va  2s. c om
var pieData = [{
                    value: 100,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "New",
                },
                {
                    value: 220,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "In Progress"
                }];
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData,{
    animationSteps: 100,
    animationEasing: 'easeInOutQuart',
    scaleShowLabels : true,
    onAnimationComplete: function() {
        this.showTooltip(this.segments);
    },
    tooltipEvents: []
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="chart-area" width="400" height="400"></canvas>  
   </body>
</html>

Related Tutorials