Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save markahesketh/108875042f0b2cc2d84a to your computer and use it in GitHub Desktop.
Save markahesketh/108875042f0b2cc2d84a to your computer and use it in GitHub Desktop.
/**
* 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));
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment