PtgDoughnut Chart.js extension

gistfile1.js

/**
 * Custom chart
 */
Chart.types.Doughnut.extend({
    name: "PtgDoughnut",

    // Check if we need to extend the scale
    initialize: function(data){
        this.options.onAnimationProgress = function(easeDecimal){
            this.drawPercentage((easeDecimal * this.segments[0].value).toFixed(1));
        };
        this.options.onAnimationComplete = function(){
            this.animationComplete = true;
        };
        Chart.types.Doughnut.prototype.initialize.apply(this, arguments);
    },

    // Draw the line on clear
    clear: function(data){
        Chart.types.Doughnut.prototype.clear.apply(this, arguments);
        if(this.animationComplete) {
            this.drawPercentage(this.segments[0].value.toFixed(1));
        }
    },

    // Draw the percentage
    drawPercentage: function(val){
        this.chart.ctx.textAlign = "center";
        this.chart.ctx.textBaseline = "middle";
        this.chart.ctx.fillStyle = '#333';
        this.chart.ctx.font = Chart.helpers.fontString(20, 'normal', '"Helvetica Neue",Helvetica,Arial,sans-serif');
        this.chart.ctx.fillText(val + '%', (this.chart.width / 2) , (this.chart.height / 2));
    }
});