How to add labels into Chart.js canvas plugin?

You'll have to add code in 2 places. As an example, take the doughnut. First add label info to the defaults (look at the original Chart.js code and compare with this):

    chart.Doughnut.defaults = {        segmentShowStroke : true,        segmentStrokeColor : "#fff",        segmentStrokeWidth : 2,        percentageInnerCutout : 50,        animation : true,        animationSteps : 100,        animationEasing : "easeOutBounce",        animateRotate : true,        animateScale : false,        onAnimationComplete : null,        labelFontFamily : "Arial",        labelFontStyle : "normal",        labelFontSize : 24,        labelFontColor : "#666"    };

Then go down to where the Doughnut is drawn and add the four ctx lines.

    animationLoop(config,null,drawPieSegments,ctx);    function drawPieSegments (animationDecimal){        ctx.font = config.labelFontStyle + " " + config.labelFontSize+"px " + config.labelFontFamily;        ctx.fillStyle = 'black';        ctx.textBaseline = 'middle';        ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200);

The ctx.fillText call will put the text onto the canvas, so you can use that to write text with x,y coordinates. You ought to be able to use this way to do basic labels. Here is the jsfiddle to tinker with:

http://jsfiddle.net/nCFGL/ (look at lines 281 and 772 in the JavaScript section of the jsfiddle for aforementioned code)

If you need something fancier, someone forked a version of Charts.js and added tooltips. Here is the discussion https://github.com/nnnick/Chart.js/pull/35, and you'll be able to find the link to the forked version inside that discussion.

This one literally took hours and hours and I found a working solution.

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

This was my final code. I was trying to display percentages as labels on doughnut

Chart.types.Doughnut.extend({name: "DoughnutAlt",draw: function() {    Chart.types.Doughnut.prototype.draw.apply(this, arguments);    this.chart.ctx.fillStyle = 'black';    this.chart.ctx.textBaseline = 'middle';    this.chart.ctx.textAlign = 'start';    this.chart.ctx.font="18px Verdana";    var total = 0;    for (var i = 0; i < this.segments.length; i++) {         total += this.segments[i].value;          }    this.chart.ctx.fillText(total , this.chart.width / 2 - 20, this.chart.height / 2, 100);    for(var i = 0; i < this.segments.length; i++){        var percentage = ((this.segments[i].value / total) * 100).toFixed(1);        if( percentage > 3 ){            var centreAngle = this.segments[i].startAngle + ((this.segments[i].endAngle - this.segments[i].startAngle) / 2),                rangeFromCentre = (this.segments[i].outerRadius - this.segments[i].innerRadius) / 2 + this.segments[i].innerRadius;            var x = this.segments[i].x + (Math.cos(centreAngle) * rangeFromCentre);            var y = this.segments[i].y + (Math.sin(centreAngle) * rangeFromCentre);            this.chart.ctx.textAlign = 'center';            this.chart.ctx.textBaseline = 'middle';            this.chart.ctx.fillStyle = '#fff';            this.chart.ctx.font = 'normal 10px Helvetica';            this.chart.ctx.fillText(percentage , x, y);        }     }}});

There is an forked version, ChartNew, that provides this functionality out of the box.

If you need to use ChartJS then you can use this revised version of @Jack's solution:

Chart.types.Doughnut.extend({    name: "DoughnutAlt",    draw: function() {        Chart.types.Doughnut.prototype.draw.apply(this, arguments);        this.chart.ctx.fillStyle = 'black';        this.chart.ctx.textBaseline = 'middle';        this.chart.ctx.fillText(this.segments[0].value + "%", this.chart.width / 2 - 20, this.chart.width / 2, 200);    }});