user3440583 user3440583 - 2 months ago 8
Javascript Question

How to add label in chart.js for pie chart

I am displaying Pie chart. But how to Display labels in pie charts.

Below is the chart.js code for pie chart.

this.Pie = function(data,options){

chart.Pie.defaults = {
segmentShowStroke : true,
segmentStrokeColor : "#fff",
segmentStrokeWidth : 2,
animation : true,
animationSteps : 100,
animationEasing : "easeOutBounce",
animateRotate : true,
animateScale : false,
onAnimationComplete : null
};

var config = (options)? mergeChartConfig(chart.Pie.defaults,options) : chart.Pie.defaults;

return new Pie(data,config,context);
};


and below is the code of html file for displaying pie chart

code:

var data = [

{
value: 20,
color:"#637b85"
},
{
value : 30,
color : "#2c9c69"
},
{
value : 40,
color : "#dbba34"
},
{
value : 10,
color : "#c62f29"
}

];
var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Pie(data);

Answer

EDIT: http://jsfiddle.net/nCFGL/223/ My Example.

You should be able to like follows:

var pieData = [
                {
                    value : 30,
                    color : "#F38630",
                    label : 'Sleep',
                    labelColor : 'white',
                    labelFontSize : '16'
                },
                ...
            ];

Include the Chart.js located at:

https://github.com/nnnick/Chart.js/pull/35