tomwalder · June 2, 2015 13:59 · Jun 2, 2015
diff --git a/gistfile1.js b/gistfile1.js
@@ -0,0 +1,34 @@
+/**
+ * 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));
+    }
+});