From 61d197f915161e7e04c024744f90eec3c54f58e4 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:04:39 +0100
Subject: [PATCH 01/39] Update core.js

---
 lib/core.js | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/lib/core.js b/lib/core.js
index 5334e68..15015a5 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -57,6 +57,43 @@ module.exports = {
       var Chart = require('chart.js');
       var el = ReactDOM.findDOMNode(this);
       var ctx = el.getContext("2d");
+      Chart.types.Doughnut.extend({
+        name: "DoughnutTextInside",
+        showTooltip: () => {
+          this.state.chart.chart.ctx.save();
+          Chart.types.Doughnut.prototype.showTooltip.apply(this.state.chart, arguments);
+          this.state.chart.chart.ctx.restore();
+        },
+        draw: () => {
+
+          Chart.types.Doughnut.prototype.draw.apply(this.state.chart,chart, arguments);
+          var width = this.state.chart.chart.width,
+            height = this.state.chart.chart.height;
+
+          var fontSize = (height / 114).toFixed(2);
+          this.state.chart.chart.ctx.fillStyle = '#000';
+          this.state.chart.chart.ctx.font = fontSize + "em Verdana";
+          this.state.chart.chart.ctx.textBaseline = "middle";
+
+          var total = 0;
+          var filled = 0;
+          var clone = arguments[0].data.slice();
+          clone.map((val) => {
+            total = total + val.value;
+          })
+          clone.pop();
+          clone.map((val) => {
+            filled = filled + val.value;
+          })
+
+          var text = Math.round((100 / total) * filled) + "%",
+            textX = Math.round((width - this.state.chart.chart.ctx.measureText(text).width) / 2),
+            textY = height / 2;
+
+          this.state.chart.chart.ctx.fillText(text, textX, textY);
+        }
+      });      
+      
       var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
       this.state.chart = chart;
     };

From 7d471ff6efbc2a33524c3e65195824d899e67a21 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:05:34 +0100
Subject: [PATCH 02/39] Create doughnutTextInside.js

---
 lib/var-vars-require-./doughnutTextInside.js | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 lib/var-vars-require-./doughnutTextInside.js

diff --git a/lib/var-vars-require-./doughnutTextInside.js b/lib/var-vars-require-./doughnutTextInside.js
new file mode 100644
index 0000000..1ea3c0a
--- /dev/null
+++ b/lib/var-vars-require-./doughnutTextInside.js
@@ -0,0 +1,3 @@
+var vars = require('./core');
+
+module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);

From 246a5fad02bc0b837339401a5eb7fd64650fa1e7 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:05:56 +0100
Subject: [PATCH 03/39] Create doughnutTextInside.js

---
 lib/doughnutTextInside.js | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 lib/doughnutTextInside.js

diff --git a/lib/doughnutTextInside.js b/lib/doughnutTextInside.js
new file mode 100644
index 0000000..1ea3c0a
--- /dev/null
+++ b/lib/doughnutTextInside.js
@@ -0,0 +1,3 @@
+var vars = require('./core');
+
+module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);

From 8d055e65cd8d0b09835f3a3abe81bdb780da9d2c Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:06:18 +0100
Subject: [PATCH 04/39] Delete doughnutTextInside.js

---
 lib/var-vars-require-./doughnutTextInside.js | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 lib/var-vars-require-./doughnutTextInside.js

diff --git a/lib/var-vars-require-./doughnutTextInside.js b/lib/var-vars-require-./doughnutTextInside.js
deleted file mode 100644
index 1ea3c0a..0000000
--- a/lib/var-vars-require-./doughnutTextInside.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var vars = require('./core');
-
-module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);

From 3e934e0484243ab88ef68dfee17547ec4b369af8 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:06:54 +0100
Subject: [PATCH 05/39] Update index.js

---
 index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.js b/index.js
index beaedd0..ad4c48b 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,7 @@
 module.exports = {
   Bar: require('./lib/bar'),
   Doughnut: require('./lib/doughnut'),
+  DoughnutTextInside: require('./lib/doughnutTextInside'),
   Line: require('./lib/line'),
   Pie: require('./lib/pie'),
   PolarArea: require('./lib/polar-area'),

From d9032d7ef9587aed95d6537577e1c9b75539df7d Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:10:09 +0100
Subject: [PATCH 06/39] Update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 228485c..51a2ffa 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ rich interactive react charting components using [chart.js](http://www.chartjs.o
 * Polar area chart
 * Pie chart
 * Doughnut chart
+* Doughnut chart with text inside
 
 [view chart examples](http://jhudson8.github.io/react-chartjs/index.html)
 

From 0e0f560f8ec130816c675c6b51dc6f89e9356a0f Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 10:21:44 +0100
Subject: [PATCH 07/39] Update core.js

---
 lib/core.js | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index 15015a5..fbb73ae 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -57,42 +57,42 @@ module.exports = {
       var Chart = require('chart.js');
       var el = ReactDOM.findDOMNode(this);
       var ctx = el.getContext("2d");
-      Chart.types.Doughnut.extend({
+Chart.types.Doughnut.extend({
         name: "DoughnutTextInside",
-        showTooltip: () => {
-          this.state.chart.chart.ctx.save();
-          Chart.types.Doughnut.prototype.showTooltip.apply(this.state.chart, arguments);
-          this.state.chart.chart.ctx.restore();
+        showTooltip: function() {
+          this.chart.ctx.save();
+          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+          this.chart.ctx.restore();
         },
-        draw: () => {
-
-          Chart.types.Doughnut.prototype.draw.apply(this.state.chart,chart, arguments);
-          var width = this.state.chart.chart.width,
-            height = this.state.chart.chart.height;
+        draw: function() {
+          Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+          var width = this.chart.width,
+            height = this.chart.height;
 
           var fontSize = (height / 114).toFixed(2);
-          this.state.chart.chart.ctx.fillStyle = '#000';
-          this.state.chart.chart.ctx.font = fontSize + "em Verdana";
-          this.state.chart.chart.ctx.textBaseline = "middle";
+          this.chart.ctx.fillStyle = '#000';
+          this.chart.ctx.font = fontSize + "em Verdana";
+          this.chart.ctx.textBaseline = "middle";
 
           var total = 0;
           var filled = 0;
-          var clone = arguments[0].data.slice();
-          clone.map((val) => {
+          var clone = this.segments.slice();
+          clone.map(function(val) {
             total = total + val.value;
           })
           clone.pop();
-          clone.map((val) => {
+          clone.map(function(val) {
             filled = filled + val.value;
           })
 
           var text = Math.round((100 / total) * filled) + "%",
-            textX = Math.round((width - this.state.chart.chart.ctx.measureText(text).width) / 2),
+            textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
             textY = height / 2;
 
-          this.state.chart.chart.ctx.fillText(text, textX, textY);
+          this.chart.ctx.fillText(text, textX, textY);
         }
-      });      
+      });
+  
       
       var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
       this.state.chart = chart;

From 100e762f3dcb4b27ba9494ee4d7da807cb7814ef Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 21:03:12 +0100
Subject: [PATCH 08/39] Update core.js

---
 lib/core.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/core.js b/lib/core.js
index fbb73ae..789383b 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -142,7 +142,7 @@ var updatePoints = function(nextProps, chart, dataKey) {
       }
     });
   } else {
-    while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+    while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
       chart.removeData();
     }
     nextProps.data.datasets.forEach(function(set, setIndex) {

From 6f7b119458875611645b83a58d801c01f47f763c Mon Sep 17 00:00:00 2001
From: Raymond <rsvvuuren@hotmail.com>
Date: Fri, 5 Feb 2016 00:41:10 +0100
Subject: [PATCH 09/39] Minor fixes

---
 dist/react-chartjs.js | 63 +++++++++++++++++++++++++++++-----
 lib/core.js           | 79 +++++++++++++++++++++++--------------------
 2 files changed, 98 insertions(+), 44 deletions(-)

diff --git a/dist/react-chartjs.js b/dist/react-chartjs.js
index 17f2fd9..861300c 100644
--- a/dist/react-chartjs.js
+++ b/dist/react-chartjs.js
@@ -57,10 +57,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	module.exports = {
 	  Bar: __webpack_require__(1),
 	  Doughnut: __webpack_require__(6),
-	  Line: __webpack_require__(7),
-	  Pie: __webpack_require__(8),
-	  PolarArea: __webpack_require__(9),
-	  Radar: __webpack_require__(10),
+	  DoughnutTextInside: __webpack_require__(7),
+	  Line: __webpack_require__(8),
+	  Pie: __webpack_require__(9),
+	  PolarArea: __webpack_require__(10),
+	  Radar: __webpack_require__(11),
 	  createClass: __webpack_require__(2).createClass
 	};
 
@@ -137,6 +138,43 @@ return /******/ (function(modules) { // webpackBootstrap
 	      var Chart = __webpack_require__(5);
 	      var el = ReactDOM.findDOMNode(this);
 	      var ctx = el.getContext("2d");
+	Chart.types.Doughnut.extend({
+	        name: "DoughnutTextInside",
+	        showTooltip: function() {
+	          this.chart.ctx.save();
+	          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+	          this.chart.ctx.restore();
+	        },
+	        draw: function() {
+	          Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+	          var width = this.chart.width,
+	            height = this.chart.height;
+
+	          var fontSize = (height / 114).toFixed(2);
+	          this.chart.ctx.fillStyle = '#000';
+	          this.chart.ctx.font = fontSize + "em Verdana";
+	          this.chart.ctx.textBaseline = "middle";
+
+	          var total = 0;
+	          var filled = 0;
+	          var clone = this.segments.slice();
+	          clone.map(function(val) {
+	            total = total + val.value;
+	          })
+	          clone.pop();
+	          clone.map(function(val) {
+	            filled = filled + val.value;
+	          })
+
+	          var text = Math.round((100 / total) * filled) + "%",
+	            textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
+	            textY = height / 2;
+
+	          this.chart.ctx.fillText(text, textX, textY);
+	        }
+	      });
+	  
+	      
 	      var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
 	      this.state.chart = chart;
 	    };
@@ -185,7 +223,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      }
 	    });
 	  } else {
-	    while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+	    while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
 	      chart.removeData();
 	    }
 	    nextProps.data.datasets.forEach(function(set, setIndex) {
@@ -242,7 +280,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var vars = __webpack_require__(2);
 
-	module.exports = vars.createClass('Line', ['getPointsAtEvent']);
+	module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);
 
 
 /***/ },
@@ -251,7 +289,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var vars = __webpack_require__(2);
 
-	module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
+	module.exports = vars.createClass('Line', ['getPointsAtEvent']);
 
 
 /***/ },
@@ -260,7 +298,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var vars = __webpack_require__(2);
 
-	module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
+	module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
 
 
 /***/ },
@@ -269,6 +307,15 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var vars = __webpack_require__(2);
 
+	module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
+
+
+/***/ },
+/* 11 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var vars = __webpack_require__(2);
+
 	module.exports = vars.createClass('Radar', ['getPointsAtEvent']);
 
 
diff --git a/lib/core.js b/lib/core.js
index 789383b..6de548e 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -2,11 +2,13 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 
 module.exports = {
-  createClass: function(chartType, methodNames, dataKey) {
+  createClass: function (chartType, methodNames, dataKey) {
     var classData = {
       displayName: chartType + 'Chart',
-      getInitialState: function() { return {}; },
-      render: function() {
+      getInitialState: function () {
+        return {};
+      },
+      render: function () {
         var _props = {
           ref: 'canvass'
         };
@@ -22,22 +24,23 @@ module.exports = {
     };
 
     var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
+
     function extra(type) {
-      classData[type] = function() {
+      classData[type] = function () {
         return this.state.chart[type].apply(this.state.chart, arguments);
       };
     }
 
-    classData.componentDidMount = function() {
+    classData.componentDidMount = function () {
       this.initializeChart(this.props);
     };
 
-    classData.componentWillUnmount = function() {
+    classData.componentWillUnmount = function () {
       var chart = this.state.chart;
       chart.destroy();
     };
 
-    classData.componentWillReceiveProps = function(nextProps) {
+    classData.componentWillReceiveProps = function (nextProps) {
       var chart = this.state.chart;
       if (nextProps.redraw) {
         chart.destroy();
@@ -53,19 +56,19 @@ module.exports = {
       }
     };
 
-    classData.initializeChart = function(nextProps) {
+    classData.initializeChart = function (nextProps) {
       var Chart = require('chart.js');
       var el = ReactDOM.findDOMNode(this);
       var ctx = el.getContext("2d");
-Chart.types.Doughnut.extend({
+      Chart.types.Doughnut.extend({
         name: "DoughnutTextInside",
-        showTooltip: function() {
+        showTooltip: function () {
           this.chart.ctx.save();
           Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
           this.chart.ctx.restore();
         },
-        draw: function() {
-          Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+        draw: function () {
+          Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
           var width = this.chart.width,
             height = this.chart.height;
 
@@ -77,44 +80,44 @@ Chart.types.Doughnut.extend({
           var total = 0;
           var filled = 0;
           var clone = this.segments.slice();
-          clone.map(function(val) {
+          clone.map(function (val) {
             total = total + val.value;
           })
           clone.pop();
-          clone.map(function(val) {
+          clone.map(function (val) {
             filled = filled + val.value;
           })
 
-          var text = Math.round((100 / total) * filled) + "%",
-            textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
+          var text = Math.round(total > 0 ? (100 / total) * filled : 0) + "%";
+          var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
             textY = height / 2;
 
           this.chart.ctx.fillText(text, textX, textY);
         }
       });
-  
-      
+
+
       var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
       this.state.chart = chart;
     };
 
     // return the chartjs instance
-    classData.getChart = function() {
+    classData.getChart = function () {
       return this.state.chart;
     };
 
     // return the canvass element that contains the chart
-    classData.getCanvass = function() {
+    classData.getCanvass = function () {
       return this.refs.canvass;
     };
 
     classData.getCanvas = classData.getCanvass;
 
     var i;
-    for (i=0; i<extras.length; i++) {
+    for (i = 0; i < extras.length; i++) {
       extra(extras[i]);
     }
-    for (i=0; i<methodNames.length; i++) {
+    for (i = 0; i < methodNames.length; i++) {
       extra(methodNames[i]);
     }
 
@@ -128,11 +131,11 @@ var dataKeys = {
   'Bar': 'bars'
 };
 
-var updatePoints = function(nextProps, chart, dataKey) {
+var updatePoints = function (nextProps, chart, dataKey) {
   var name = chart.name;
 
   if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
-    nextProps.data.forEach(function(segment, segmentIndex) {
+    nextProps.data.forEach(function (segment, segmentIndex) {
       if (!chart.segments[segmentIndex]) {
         chart.addData(segment);
       } else {
@@ -142,24 +145,28 @@ var updatePoints = function(nextProps, chart, dataKey) {
       }
     });
   } else {
-    while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
-      chart.removeData();
+    if (chart.scale) {
+      while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+        chart.removeData();
+      }
     }
-    nextProps.data.datasets.forEach(function(set, setIndex) {
-      set.data.forEach(function(val, pointIndex) {
-        if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
-          addData(nextProps, chart, setIndex, pointIndex);
-        } else {
-          chart.datasets[setIndex][dataKey][pointIndex].value = val;
-        }
+    if (nextProps.data && nextProps.data.datasets) {
+      nextProps.data.datasets.forEach(function (set, setIndex) {
+        set.data.forEach(function (val, pointIndex) {
+          if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
+            addData(nextProps, chart, setIndex, pointIndex);
+          } else {
+            chart.datasets[setIndex][dataKey][pointIndex].value = val;
+          }
+        });
       });
-    });
+    }
   }
 };
 
-var addData = function(nextProps, chart, setIndex, pointIndex) {
+var addData = function (nextProps, chart, setIndex, pointIndex) {
   var values = [];
-  nextProps.data.datasets.forEach(function(set) {
+  nextProps.data.datasets.forEach(function (set) {
     values.push(set.data[pointIndex]);
   });
   chart.addData(values, nextProps.data.labels[setIndex]);

From c2a15175f830dd9d12588704789dac6e30294490 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 16:25:25 -0600
Subject: [PATCH 10/39] Modified update function and added labelScale to chart
 options for the DoughnutWithTextInside component

---
 lib/core.js | 29 +++++++++++------------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index 6de548e..ee0000c 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -40,20 +40,10 @@ module.exports = {
       chart.destroy();
     };
 
-    classData.componentWillReceiveProps = function (nextProps) {
+      classData.componentWillReceiveProps = function(nextProps) {
       var chart = this.state.chart;
-      if (nextProps.redraw) {
-        chart.destroy();
-        this.initializeChart(nextProps);
-      } else {
-        dataKey = dataKey || dataKeys[chart.name];
-        updatePoints(nextProps, chart, dataKey);
-        if (chart.scale) {
-          chart.scale.xLabels = nextProps.data.labels;
-          chart.scale.calculateXLabelRotation();
-        }
-        chart.update();
-      }
+      chart.data = nextProps.data;
+      chart.update();
     };
 
     classData.initializeChart = function (nextProps) {
@@ -62,17 +52,20 @@ module.exports = {
       var ctx = el.getContext("2d");
       Chart.types.Doughnut.extend({
         name: "DoughnutTextInside",
-        showTooltip: function () {
-          this.chart.ctx.save();
-          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
-          this.chart.ctx.restore();
+        // showTooltip: function () {
+        //   this.chart.ctx.save();
+        //   Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+        //   this.chart.ctx.restore();
+        // },
+        defaults: {
+          labelScale: 100
         },
         draw: function () {
           Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
           var width = this.chart.width,
             height = this.chart.height;
 
-          var fontSize = (height / 114).toFixed(2);
+          var fontSize = (height / this.options.labelScale).toFixed(2);
           this.chart.ctx.fillStyle = '#000';
           this.chart.ctx.font = fontSize + "em Verdana";
           this.chart.ctx.textBaseline = "middle";

From a76cf64fbb64b331c52b8e2fedd9dba4bc4c3f6f Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 17:01:43 -0600
Subject: [PATCH 11/39] Working towards changing the font size

---
 lib/core.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index ee0000c..b3fdc03 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -65,9 +65,9 @@ module.exports = {
           var width = this.chart.width,
             height = this.chart.height;
 
-          var fontSize = (height / this.options.labelScale).toFixed(2);
+          //var fontSize = height.toFixed(2);
           this.chart.ctx.fillStyle = '#000';
-          this.chart.ctx.font = fontSize + "em Verdana";
+          this.chart.ctx.font = "1em 'Open Sans'";
           this.chart.ctx.textBaseline = "middle";
 
           var total = 0;

From 5ac0501c8dfa001a63028555592f0164d65977d4 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 17:05:30 -0600
Subject: [PATCH 12/39] testing

---
 lib/core.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index b3fdc03..0aef609 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -65,9 +65,9 @@ module.exports = {
           var width = this.chart.width,
             height = this.chart.height;
 
-          //var fontSize = height.toFixed(2);
+          var fontSize = (height / this.options.labelScale).toFixed(2);
           this.chart.ctx.fillStyle = '#000';
-          this.chart.ctx.font = "1em 'Open Sans'";
+          this.chart.ctx.font = fontSize + "em 'Open Sans'";
           this.chart.ctx.textBaseline = "middle";
 
           var total = 0;

From a5857156450994d23c7883c5cb171973dfa69483 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 18:42:15 -0600
Subject: [PATCH 13/39] updating

---
 lib/core.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index 0aef609..468b204 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -52,11 +52,11 @@ module.exports = {
       var ctx = el.getContext("2d");
       Chart.types.Doughnut.extend({
         name: "DoughnutTextInside",
-        // showTooltip: function () {
-        //   this.chart.ctx.save();
-        //   Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
-        //   this.chart.ctx.restore();
-        // },
+        showTooltip: function () {
+          this.chart.ctx.save();
+          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+          this.chart.ctx.restore();
+        },
         defaults: {
           labelScale: 100
         },

From 03fd79eb65b238ff7a883c1240f0eb7140d9f5c1 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 20:09:44 -0600
Subject: [PATCH 14/39] looking into animation fix

---
 lib/core.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index 468b204..ad89138 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -40,7 +40,7 @@ module.exports = {
       chart.destroy();
     };
 
-      classData.componentWillReceiveProps = function(nextProps) {
+    classData.componentWillReceiveProps = function(nextProps) {
       var chart = this.state.chart;
       chart.data = nextProps.data;
       chart.update();
@@ -127,7 +127,7 @@ var dataKeys = {
 var updatePoints = function (nextProps, chart, dataKey) {
   var name = chart.name;
 
-  if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
+  if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut' || name === 'DoughnutTextInside') {
     nextProps.data.forEach(function (segment, segmentIndex) {
       if (!chart.segments[segmentIndex]) {
         chart.addData(segment);

From d491ddf88262b15861f5c44f8fbee749b46cfb06 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 21:21:05 -0600
Subject: [PATCH 15/39] modifying core.js

---
 lib/core.js | 161 +++++++++++++++++++++++++++-------------------------
 1 file changed, 85 insertions(+), 76 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index ad89138..ea64d05 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -1,166 +1,175 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
+var React = require('react')
+var ReactDOM = require('react-dom')
 
 module.exports = {
   createClass: function (chartType, methodNames, dataKey) {
     var classData = {
       displayName: chartType + 'Chart',
       getInitialState: function () {
-        return {};
+        return {}
       },
       render: function () {
         var _props = {
           ref: 'canvass'
-        };
+        }
         for (var name in this.props) {
           if (this.props.hasOwnProperty(name)) {
             if (name !== 'data' && name !== 'options') {
-              _props[name] = this.props[name];
+              _props[name] = this.props[name]
             }
           }
         }
-        return React.createElement('canvas', _props);
+        return React.createElement('canvas', _props)
       }
-    };
+    }
 
-    var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
+    var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData']
 
-    function extra(type) {
+    function extra (type) {
       classData[type] = function () {
-        return this.state.chart[type].apply(this.state.chart, arguments);
-      };
+        return this.state.chart[type].apply(this.state.chart, arguments)
+      }
     }
 
     classData.componentDidMount = function () {
-      this.initializeChart(this.props);
-    };
+      this.initializeChart(this.props)
+    }
 
     classData.componentWillUnmount = function () {
-      var chart = this.state.chart;
-      chart.destroy();
-    };
+      var chart = this.state.chart
+      chart.destroy()
+    }
 
-    classData.componentWillReceiveProps = function(nextProps) {
-      var chart = this.state.chart;
-      chart.data = nextProps.data;
-      chart.update();
-    };
+    classData.componentWillReceiveProps = function (nextProps) {
+      var chart = this.state.chart
+      if (nextProps.redraw) {
+        chart.destroy()
+        this.initializeChart(nextProps)
+      } else {
+        dataKey = dataKey || dataKeys[chart.name]
+        updatePoints(nextProps, chart, dataKey)
+        if (chart.scale) {
+          chart.scale.xLabels = nextProps.data.labels
+          chart.scale.calculateXLabelRotation()
+        }
+        chart.update()
+      }
+    }
 
     classData.initializeChart = function (nextProps) {
-      var Chart = require('chart.js');
-      var el = ReactDOM.findDOMNode(this);
-      var ctx = el.getContext("2d");
+      var Chart = require('chart.js')
+      var el = ReactDOM.findDOMNode(this)
+      var ctx = el.getContext('2d')
       Chart.types.Doughnut.extend({
-        name: "DoughnutTextInside",
+        name: 'DoughnutTextInside',
         showTooltip: function () {
-          this.chart.ctx.save();
-          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
-          this.chart.ctx.restore();
+          this.chart.ctx.save()
+          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments)
+          this.chart.ctx.restore()
         },
         defaults: {
           labelScale: 100
         },
         draw: function () {
-          Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
+          Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments)
           var width = this.chart.width,
-            height = this.chart.height;
+            height = this.chart.height
 
-          var fontSize = (height / this.options.labelScale).toFixed(2);
-          this.chart.ctx.fillStyle = '#000';
-          this.chart.ctx.font = fontSize + "em 'Open Sans'";
-          this.chart.ctx.textBaseline = "middle";
+          var fontSize = (height / this.options.labelScale).toFixed(2)
+          this.chart.ctx.fillStyle = '#000'
+          this.chart.ctx.font = fontSize + "em 'Open Sans'"
+          this.chart.ctx.textBaseline = 'middle'
 
-          var total = 0;
-          var filled = 0;
-          var clone = this.segments.slice();
+          var total = 0
+          var filled = 0
+          var clone = this.segments.slice()
           clone.map(function (val) {
-            total = total + val.value;
+            total = total + val.value
           })
-          clone.pop();
+          clone.pop()
           clone.map(function (val) {
-            filled = filled + val.value;
+            filled = filled + val.value
           })
 
-          var text = Math.round(total > 0 ? (100 / total) * filled : 0) + "%";
+          var text = Math.round(total > 0 ? (100 / total) * filled : 0) + '%'
           var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
-            textY = height / 2;
+            textY = height / 2
 
-          this.chart.ctx.fillText(text, textX, textY);
+          this.chart.ctx.fillText(text, textX, textY)
         }
-      });
-
+      })
 
-      var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
-      this.state.chart = chart;
-    };
+      var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {})
+      this.state.chart = chart
+    }
 
     // return the chartjs instance
     classData.getChart = function () {
-      return this.state.chart;
-    };
+      return this.state.chart
+    }
 
     // return the canvass element that contains the chart
     classData.getCanvass = function () {
-      return this.refs.canvass;
-    };
+      return this.refs.canvass
+    }
 
-    classData.getCanvas = classData.getCanvass;
+    classData.getCanvas = classData.getCanvass
 
-    var i;
+    var i
     for (i = 0; i < extras.length; i++) {
-      extra(extras[i]);
+      extra(extras[i])
     }
     for (i = 0; i < methodNames.length; i++) {
-      extra(methodNames[i]);
+      extra(methodNames[i])
     }
 
-    return React.createClass(classData);
+    return React.createClass(classData)
   }
-};
+}
 
 var dataKeys = {
   'Line': 'points',
   'Radar': 'points',
   'Bar': 'bars'
-};
+}
 
 var updatePoints = function (nextProps, chart, dataKey) {
-  var name = chart.name;
+  var name = chart.name
 
   if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut' || name === 'DoughnutTextInside') {
     nextProps.data.forEach(function (segment, segmentIndex) {
       if (!chart.segments[segmentIndex]) {
-        chart.addData(segment);
+        chart.addData(segment)
       } else {
         Object.keys(segment).forEach(function (key) {
-          chart.segments[segmentIndex][key] = segment[key];
-        });
+          chart.segments[segmentIndex][key] = segment[key]
+        })
       }
-    });
+    })
   } else {
     if (chart.scale) {
       while (chart.scale.xLabels.length > nextProps.data.labels.length) {
-        chart.removeData();
+        chart.removeData()
       }
     }
     if (nextProps.data && nextProps.data.datasets) {
       nextProps.data.datasets.forEach(function (set, setIndex) {
         set.data.forEach(function (val, pointIndex) {
-          if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
-            addData(nextProps, chart, setIndex, pointIndex);
+          if (typeof (chart.datasets[setIndex][dataKey][pointIndex]) == 'undefined') {
+            addData(nextProps, chart, setIndex, pointIndex)
           } else {
-            chart.datasets[setIndex][dataKey][pointIndex].value = val;
+            chart.datasets[setIndex][dataKey][pointIndex].value = val
           }
-        });
-      });
+        })
+      })
     }
   }
-};
+}
 
 var addData = function (nextProps, chart, setIndex, pointIndex) {
-  var values = [];
+  var values = []
   nextProps.data.datasets.forEach(function (set) {
-    values.push(set.data[pointIndex]);
-  });
-  chart.addData(values, nextProps.data.labels[setIndex]);
-};
+    values.push(set.data[pointIndex])
+  })
+  chart.addData(values, nextProps.data.labels[setIndex])
+}

From cf57c5fd54cb570fc0c20df740cd002ad81216e7 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 23:39:03 -0600
Subject: [PATCH 16/39] testing

---
 lib/core.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/core.js b/lib/core.js
index ea64d05..fecbd93 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -39,7 +39,10 @@ module.exports = {
       var chart = this.state.chart
       chart.destroy()
     }
-
+    classData.componentDidUpdate = function () {
+      var chart = this.state.chart
+      chart.update()
+    }
     classData.componentWillReceiveProps = function (nextProps) {
       var chart = this.state.chart
       if (nextProps.redraw) {

From 0d95f33640aa6f949722dd33cab6d82198f526e7 Mon Sep 17 00:00:00 2001
From: MalachiM <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 23:43:46 -0600
Subject: [PATCH 17/39] Revert "testing"

---
 lib/core.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index fecbd93..ea64d05 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -39,10 +39,7 @@ module.exports = {
       var chart = this.state.chart
       chart.destroy()
     }
-    classData.componentDidUpdate = function () {
-      var chart = this.state.chart
-      chart.update()
-    }
+
     classData.componentWillReceiveProps = function (nextProps) {
       var chart = this.state.chart
       if (nextProps.redraw) {

From a8f6e57f8ef6639f46bdd381a1995bb0d3c4d8f0 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Thu, 11 Feb 2016 10:52:10 -0600
Subject: [PATCH 18/39] updating the draw function

---
 lib/core.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index ea64d05..40416c8 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -80,16 +80,12 @@ module.exports = {
           this.chart.ctx.font = fontSize + "em 'Open Sans'"
           this.chart.ctx.textBaseline = 'middle'
 
-          var total = 0
-          var filled = 0
+          var total = this.total
           var clone = this.segments.slice()
-          clone.map(function (val) {
-            total = total + val.value
-          })
           clone.pop()
-          clone.map(function (val) {
-            filled = filled + val.value
-          })
+          var filled = clone.reduce(function (a, val) {
+            return  a + val.value
+          }, 0)
 
           var text = Math.round(total > 0 ? (100 / total) * filled : 0) + '%'
           var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),

From f4d2cef0a6aaba33b67ccbc5d448621b667cada9 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Thu, 11 Feb 2016 11:04:01 -0600
Subject: [PATCH 19/39] updating draw function's apply call

---
 lib/core.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/core.js b/lib/core.js
index 40416c8..6c68f0e 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -71,7 +71,7 @@ module.exports = {
           labelScale: 100
         },
         draw: function () {
-          Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments)
+          Chart.types.Doughnut.prototype.draw.apply(this, arguments)
           var width = this.chart.width,
             height = this.chart.height
 

From b19eee8f9bced9d16166ea926ccbbdd4a77b5811 Mon Sep 17 00:00:00 2001
From: John Crowe <thecrow1213@gmail.com>
Date: Sun, 20 Mar 2016 15:08:08 -0500
Subject: [PATCH 20/39] Fixing update function, removes old segments on update.

---
 dist/react-chartjs.js     | 4 ++++
 dist/react-chartjs.min.js | 2 +-
 lib/core.js               | 4 ++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/dist/react-chartjs.js b/dist/react-chartjs.js
index 17f2fd9..db0b58b 100644
--- a/dist/react-chartjs.js
+++ b/dist/react-chartjs.js
@@ -184,6 +184,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	        });
 	      }
 	    });
+
+	    while(nextProps.data.length < chart.segments.length) {
+	      chart.removeData();
+	    }
 	  } else {
 	    while (chart.scale.xLabels.length > nextProps.data.labels.length) {
 	      chart.removeData();
diff --git a/dist/react-chartjs.min.js b/dist/react-chartjs.min.js
index 3051eff..d3a77fc 100644
--- a/dist/react-chartjs.min.js
+++ b/dist/react-chartjs.min.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom"),require("Chartjs")):"function"==typeof define&&define.amd?define(["react","react-dom","Chartjs"],e):"object"==typeof exports?exports["react-chartjs"]=e(require("react"),require("react-dom"),require("Chartjs")):t["react-chartjs"]=e(t.React,t.ReactDOM,t.Chart)}(this,function(t,e,a){return function(t){function e(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return t[r].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e,a){t.exports={Bar:a(1),Doughnut:a(6),Line:a(7),Pie:a(8),PolarArea:a(9),Radar:a(10),createClass:a(2).createClass}},function(t,e,a){var r=a(2);t.exports=r.createClass("Bar",["getBarsAtEvent"])},function(t,e,a){var r=a(3),n=a(4);t.exports={createClass:function(t,e,i){function c(t){u[t]=function(){return this.state.chart[t].apply(this.state.chart,arguments)}}var u={displayName:t+"Chart",getInitialState:function(){return{}},render:function(){var t={ref:"canvass"};for(var e in this.props)this.props.hasOwnProperty(e)&&"data"!==e&&"options"!==e&&(t[e]=this.props[e]);return r.createElement("canvas",t)}},f=["clear","stop","resize","toBase64Image","generateLegend","update","addData","removeData"];u.componentDidMount=function(){this.initializeChart(this.props)},u.componentWillUnmount=function(){var t=this.state.chart;t.destroy()},u.componentWillReceiveProps=function(t){var e=this.state.chart;t.redraw?(e.destroy(),this.initializeChart(t)):(i=i||s[e.name],o(t,e,i),e.scale&&(e.scale.xLabels=t.data.labels,e.scale.calculateXLabelRotation()),e.update())},u.initializeChart=function(e){var r=a(5),s=n.findDOMNode(this),o=s.getContext("2d"),i=new r(o)[t](e.data,e.options||{});this.state.chart=i},u.getChart=function(){return this.state.chart},u.getCanvass=function(){return this.refs.canvass},u.getCanvas=u.getCanvass;var l;for(l=0;l<f.length;l++)c(f[l]);for(l=0;l<e.length;l++)c(e[l]);return r.createClass(u)}};var s={Line:"points",Radar:"points",Bar:"bars"},o=function(t,e,a){var r=e.name;if("PolarArea"===r||"Pie"===r||"Doughnut"===r)t.data.forEach(function(t,a){e.segments[a]?Object.keys(t).forEach(function(r){e.segments[a][r]=t[r]}):e.addData(t)});else{for(;e.scale.xLabels.length>t.data.labels.length;)e.removeData();t.data.datasets.forEach(function(r,n){r.data.forEach(function(r,s){"undefined"==typeof e.datasets[n][a][s]?i(t,e,n,s):e.datasets[n][a][s].value=r})})}},i=function(t,e,a,r){var n=[];t.data.datasets.forEach(function(t){n.push(t.data[r])}),e.addData(n,t.data.labels[a])}},function(e,a){e.exports=t},function(t,a){t.exports=e},function(t,e){t.exports=a},function(t,e,a){var r=a(2);t.exports=r.createClass("Doughnut",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Line",["getPointsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Pie",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("PolarArea",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Radar",["getPointsAtEvent"])}])});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom"),require("Chartjs")):"function"==typeof define&&define.amd?define(["react","react-dom","Chartjs"],e):"object"==typeof exports?exports["react-chartjs"]=e(require("react"),require("react-dom"),require("Chartjs")):t["react-chartjs"]=e(t.React,t.ReactDOM,t.Chart)}(this,function(t,e,a){return function(t){function e(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return t[r].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e,a){t.exports={Bar:a(1),Doughnut:a(6),Line:a(7),Pie:a(8),PolarArea:a(9),Radar:a(10),createClass:a(2).createClass}},function(t,e,a){var r=a(2);t.exports=r.createClass("Bar",["getBarsAtEvent"])},function(t,e,a){var r=a(3),n=a(4);t.exports={createClass:function(t,e,i){function c(t){u[t]=function(){return this.state.chart[t].apply(this.state.chart,arguments)}}var u={displayName:t+"Chart",getInitialState:function(){return{}},render:function(){var t={ref:"canvass"};for(var e in this.props)this.props.hasOwnProperty(e)&&"data"!==e&&"options"!==e&&(t[e]=this.props[e]);return r.createElement("canvas",t)}},f=["clear","stop","resize","toBase64Image","generateLegend","update","addData","removeData"];u.componentDidMount=function(){this.initializeChart(this.props)},u.componentWillUnmount=function(){var t=this.state.chart;t.destroy()},u.componentWillReceiveProps=function(t){var e=this.state.chart;t.redraw?(e.destroy(),this.initializeChart(t)):(i=i||s[e.name],o(t,e,i),e.scale&&(e.scale.xLabels=t.data.labels,e.scale.calculateXLabelRotation()),e.update())},u.initializeChart=function(e){var r=a(5),s=n.findDOMNode(this),o=s.getContext("2d"),i=new r(o)[t](e.data,e.options||{});this.state.chart=i},u.getChart=function(){return this.state.chart},u.getCanvass=function(){return this.refs.canvass},u.getCanvas=u.getCanvass;var l;for(l=0;l<f.length;l++)c(f[l]);for(l=0;l<e.length;l++)c(e[l]);return r.createClass(u)}};var s={Line:"points",Radar:"points",Bar:"bars"},o=function(t,e,a){var r=e.name;if("PolarArea"===r||"Pie"===r||"Doughnut"===r)for(t.data.forEach(function(t,a){e.segments[a]?Object.keys(t).forEach(function(r){e.segments[a][r]=t[r]}):e.addData(t)});t.data.length<e.segments.length;)e.removeData();else{for(;e.scale.xLabels.length>t.data.labels.length;)e.removeData();t.data.datasets.forEach(function(r,n){r.data.forEach(function(r,s){"undefined"==typeof e.datasets[n][a][s]?i(t,e,n,s):e.datasets[n][a][s].value=r})})}},i=function(t,e,a,r){var n=[];t.data.datasets.forEach(function(t){n.push(t.data[r])}),e.addData(n,t.data.labels[a])}},function(e,a){e.exports=t},function(t,a){t.exports=e},function(t,e){t.exports=a},function(t,e,a){var r=a(2);t.exports=r.createClass("Doughnut",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Line",["getPointsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Pie",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("PolarArea",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Radar",["getPointsAtEvent"])}])});
\ No newline at end of file
diff --git a/lib/core.js b/lib/core.js
index 5334e68..9ef0bce 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -104,6 +104,10 @@ var updatePoints = function(nextProps, chart, dataKey) {
         });
       }
     });
+
+    while(nextProps.data.length < chart.segments.length) {
+      chart.removeData();
+    }
   } else {
     while (chart.scale.xLabels.length > nextProps.data.labels.length) {
       chart.removeData();

From a0e8895758920523f728c6234f9e50b25e5e84b3 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:04:39 +0100
Subject: [PATCH 21/39] Update core.js

---
 lib/core.js | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/lib/core.js b/lib/core.js
index 9ef0bce..b0ebcd0 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -57,6 +57,43 @@ module.exports = {
       var Chart = require('chart.js');
       var el = ReactDOM.findDOMNode(this);
       var ctx = el.getContext("2d");
+      Chart.types.Doughnut.extend({
+        name: "DoughnutTextInside",
+        showTooltip: () => {
+          this.state.chart.chart.ctx.save();
+          Chart.types.Doughnut.prototype.showTooltip.apply(this.state.chart, arguments);
+          this.state.chart.chart.ctx.restore();
+        },
+        draw: () => {
+
+          Chart.types.Doughnut.prototype.draw.apply(this.state.chart,chart, arguments);
+          var width = this.state.chart.chart.width,
+            height = this.state.chart.chart.height;
+
+          var fontSize = (height / 114).toFixed(2);
+          this.state.chart.chart.ctx.fillStyle = '#000';
+          this.state.chart.chart.ctx.font = fontSize + "em Verdana";
+          this.state.chart.chart.ctx.textBaseline = "middle";
+
+          var total = 0;
+          var filled = 0;
+          var clone = arguments[0].data.slice();
+          clone.map((val) => {
+            total = total + val.value;
+          })
+          clone.pop();
+          clone.map((val) => {
+            filled = filled + val.value;
+          })
+
+          var text = Math.round((100 / total) * filled) + "%",
+            textX = Math.round((width - this.state.chart.chart.ctx.measureText(text).width) / 2),
+            textY = height / 2;
+
+          this.state.chart.chart.ctx.fillText(text, textX, textY);
+        }
+      });      
+      
       var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
       this.state.chart = chart;
     };

From 3df5d0e984677d53d4477a663c54d4023b6ca00c Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:05:34 +0100
Subject: [PATCH 22/39] Create doughnutTextInside.js

---
 lib/var-vars-require-./doughnutTextInside.js | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 lib/var-vars-require-./doughnutTextInside.js

diff --git a/lib/var-vars-require-./doughnutTextInside.js b/lib/var-vars-require-./doughnutTextInside.js
new file mode 100644
index 0000000..1ea3c0a
--- /dev/null
+++ b/lib/var-vars-require-./doughnutTextInside.js
@@ -0,0 +1,3 @@
+var vars = require('./core');
+
+module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);

From 31ad743cc807bb9564fb38d6fb521fe3f5548560 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:05:56 +0100
Subject: [PATCH 23/39] Create doughnutTextInside.js

---
 lib/doughnutTextInside.js | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 lib/doughnutTextInside.js

diff --git a/lib/doughnutTextInside.js b/lib/doughnutTextInside.js
new file mode 100644
index 0000000..1ea3c0a
--- /dev/null
+++ b/lib/doughnutTextInside.js
@@ -0,0 +1,3 @@
+var vars = require('./core');
+
+module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);

From b9260dc534ed9b2592c39e5be5f240e8b7e581bf Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:06:18 +0100
Subject: [PATCH 24/39] Delete doughnutTextInside.js

---
 lib/var-vars-require-./doughnutTextInside.js | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 lib/var-vars-require-./doughnutTextInside.js

diff --git a/lib/var-vars-require-./doughnutTextInside.js b/lib/var-vars-require-./doughnutTextInside.js
deleted file mode 100644
index 1ea3c0a..0000000
--- a/lib/var-vars-require-./doughnutTextInside.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var vars = require('./core');
-
-module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);

From 7dceb8332f442e27f2f27a0fe8c997b5bbca225b Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:06:54 +0100
Subject: [PATCH 25/39] Update index.js

---
 index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.js b/index.js
index beaedd0..ad4c48b 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,7 @@
 module.exports = {
   Bar: require('./lib/bar'),
   Doughnut: require('./lib/doughnut'),
+  DoughnutTextInside: require('./lib/doughnutTextInside'),
   Line: require('./lib/line'),
   Pie: require('./lib/pie'),
   PolarArea: require('./lib/polar-area'),

From 8d860fda13e4fbbbf709040d1bbe5ea80d815f5b Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:10:09 +0100
Subject: [PATCH 26/39] Update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 228485c..51a2ffa 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ rich interactive react charting components using [chart.js](http://www.chartjs.o
 * Polar area chart
 * Pie chart
 * Doughnut chart
+* Doughnut chart with text inside
 
 [view chart examples](http://jhudson8.github.io/react-chartjs/index.html)
 

From e80813541e5164e58f44c3d73c7360bc829bfada Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 10:21:44 +0100
Subject: [PATCH 27/39] Update core.js

---
 lib/core.js | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index b0ebcd0..f420b71 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -57,42 +57,42 @@ module.exports = {
       var Chart = require('chart.js');
       var el = ReactDOM.findDOMNode(this);
       var ctx = el.getContext("2d");
-      Chart.types.Doughnut.extend({
+Chart.types.Doughnut.extend({
         name: "DoughnutTextInside",
-        showTooltip: () => {
-          this.state.chart.chart.ctx.save();
-          Chart.types.Doughnut.prototype.showTooltip.apply(this.state.chart, arguments);
-          this.state.chart.chart.ctx.restore();
+        showTooltip: function() {
+          this.chart.ctx.save();
+          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+          this.chart.ctx.restore();
         },
-        draw: () => {
-
-          Chart.types.Doughnut.prototype.draw.apply(this.state.chart,chart, arguments);
-          var width = this.state.chart.chart.width,
-            height = this.state.chart.chart.height;
+        draw: function() {
+          Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+          var width = this.chart.width,
+            height = this.chart.height;
 
           var fontSize = (height / 114).toFixed(2);
-          this.state.chart.chart.ctx.fillStyle = '#000';
-          this.state.chart.chart.ctx.font = fontSize + "em Verdana";
-          this.state.chart.chart.ctx.textBaseline = "middle";
+          this.chart.ctx.fillStyle = '#000';
+          this.chart.ctx.font = fontSize + "em Verdana";
+          this.chart.ctx.textBaseline = "middle";
 
           var total = 0;
           var filled = 0;
-          var clone = arguments[0].data.slice();
-          clone.map((val) => {
+          var clone = this.segments.slice();
+          clone.map(function(val) {
             total = total + val.value;
           })
           clone.pop();
-          clone.map((val) => {
+          clone.map(function(val) {
             filled = filled + val.value;
           })
 
           var text = Math.round((100 / total) * filled) + "%",
-            textX = Math.round((width - this.state.chart.chart.ctx.measureText(text).width) / 2),
+            textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
             textY = height / 2;
 
-          this.state.chart.chart.ctx.fillText(text, textX, textY);
+          this.chart.ctx.fillText(text, textX, textY);
         }
-      });      
+      });
+  
       
       var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
       this.state.chart = chart;

From b85abeb32ab6d276b05f3834cd07059d37c9a9ea Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 21:03:12 +0100
Subject: [PATCH 28/39] Update core.js

---
 lib/core.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/core.js b/lib/core.js
index f420b71..f871cd9 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -146,7 +146,7 @@ var updatePoints = function(nextProps, chart, dataKey) {
       chart.removeData();
     }
   } else {
-    while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+    while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
       chart.removeData();
     }
     nextProps.data.datasets.forEach(function(set, setIndex) {

From 6eb1a638e6dea5464dbf2ff892582e740cae88f2 Mon Sep 17 00:00:00 2001
From: Raymond <rsvvuuren@hotmail.com>
Date: Fri, 5 Feb 2016 00:41:10 +0100
Subject: [PATCH 29/39] Minor fixes

---
 dist/react-chartjs.js | 63 +++++++++++++++++++++++++++++-----
 lib/core.js           | 79 +++++++++++++++++++++++--------------------
 2 files changed, 98 insertions(+), 44 deletions(-)

diff --git a/dist/react-chartjs.js b/dist/react-chartjs.js
index db0b58b..69561d1 100644
--- a/dist/react-chartjs.js
+++ b/dist/react-chartjs.js
@@ -57,10 +57,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	module.exports = {
 	  Bar: __webpack_require__(1),
 	  Doughnut: __webpack_require__(6),
-	  Line: __webpack_require__(7),
-	  Pie: __webpack_require__(8),
-	  PolarArea: __webpack_require__(9),
-	  Radar: __webpack_require__(10),
+	  DoughnutTextInside: __webpack_require__(7),
+	  Line: __webpack_require__(8),
+	  Pie: __webpack_require__(9),
+	  PolarArea: __webpack_require__(10),
+	  Radar: __webpack_require__(11),
 	  createClass: __webpack_require__(2).createClass
 	};
 
@@ -137,6 +138,43 @@ return /******/ (function(modules) { // webpackBootstrap
 	      var Chart = __webpack_require__(5);
 	      var el = ReactDOM.findDOMNode(this);
 	      var ctx = el.getContext("2d");
+	Chart.types.Doughnut.extend({
+	        name: "DoughnutTextInside",
+	        showTooltip: function() {
+	          this.chart.ctx.save();
+	          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+	          this.chart.ctx.restore();
+	        },
+	        draw: function() {
+	          Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+	          var width = this.chart.width,
+	            height = this.chart.height;
+
+	          var fontSize = (height / 114).toFixed(2);
+	          this.chart.ctx.fillStyle = '#000';
+	          this.chart.ctx.font = fontSize + "em Verdana";
+	          this.chart.ctx.textBaseline = "middle";
+
+	          var total = 0;
+	          var filled = 0;
+	          var clone = this.segments.slice();
+	          clone.map(function(val) {
+	            total = total + val.value;
+	          })
+	          clone.pop();
+	          clone.map(function(val) {
+	            filled = filled + val.value;
+	          })
+
+	          var text = Math.round((100 / total) * filled) + "%",
+	            textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
+	            textY = height / 2;
+
+	          this.chart.ctx.fillText(text, textX, textY);
+	        }
+	      });
+	  
+	      
 	      var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
 	      this.state.chart = chart;
 	    };
@@ -189,7 +227,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      chart.removeData();
 	    }
 	  } else {
-	    while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+	    while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
 	      chart.removeData();
 	    }
 	    nextProps.data.datasets.forEach(function(set, setIndex) {
@@ -246,7 +284,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var vars = __webpack_require__(2);
 
-	module.exports = vars.createClass('Line', ['getPointsAtEvent']);
+	module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);
 
 
 /***/ },
@@ -255,7 +293,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var vars = __webpack_require__(2);
 
-	module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
+	module.exports = vars.createClass('Line', ['getPointsAtEvent']);
 
 
 /***/ },
@@ -264,7 +302,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var vars = __webpack_require__(2);
 
-	module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
+	module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
 
 
 /***/ },
@@ -273,6 +311,15 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var vars = __webpack_require__(2);
 
+	module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
+
+
+/***/ },
+/* 11 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var vars = __webpack_require__(2);
+
 	module.exports = vars.createClass('Radar', ['getPointsAtEvent']);
 
 
diff --git a/lib/core.js b/lib/core.js
index f871cd9..b567771 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -2,11 +2,13 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 
 module.exports = {
-  createClass: function(chartType, methodNames, dataKey) {
+  createClass: function (chartType, methodNames, dataKey) {
     var classData = {
       displayName: chartType + 'Chart',
-      getInitialState: function() { return {}; },
-      render: function() {
+      getInitialState: function () {
+        return {};
+      },
+      render: function () {
         var _props = {
           ref: 'canvass'
         };
@@ -22,22 +24,23 @@ module.exports = {
     };
 
     var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
+
     function extra(type) {
-      classData[type] = function() {
+      classData[type] = function () {
         return this.state.chart[type].apply(this.state.chart, arguments);
       };
     }
 
-    classData.componentDidMount = function() {
+    classData.componentDidMount = function () {
       this.initializeChart(this.props);
     };
 
-    classData.componentWillUnmount = function() {
+    classData.componentWillUnmount = function () {
       var chart = this.state.chart;
       chart.destroy();
     };
 
-    classData.componentWillReceiveProps = function(nextProps) {
+    classData.componentWillReceiveProps = function (nextProps) {
       var chart = this.state.chart;
       if (nextProps.redraw) {
         chart.destroy();
@@ -53,19 +56,19 @@ module.exports = {
       }
     };
 
-    classData.initializeChart = function(nextProps) {
+    classData.initializeChart = function (nextProps) {
       var Chart = require('chart.js');
       var el = ReactDOM.findDOMNode(this);
       var ctx = el.getContext("2d");
-Chart.types.Doughnut.extend({
+      Chart.types.Doughnut.extend({
         name: "DoughnutTextInside",
-        showTooltip: function() {
+        showTooltip: function () {
           this.chart.ctx.save();
           Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
           this.chart.ctx.restore();
         },
-        draw: function() {
-          Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+        draw: function () {
+          Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
           var width = this.chart.width,
             height = this.chart.height;
 
@@ -77,44 +80,44 @@ Chart.types.Doughnut.extend({
           var total = 0;
           var filled = 0;
           var clone = this.segments.slice();
-          clone.map(function(val) {
+          clone.map(function (val) {
             total = total + val.value;
           })
           clone.pop();
-          clone.map(function(val) {
+          clone.map(function (val) {
             filled = filled + val.value;
           })
 
-          var text = Math.round((100 / total) * filled) + "%",
-            textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
+          var text = Math.round(total > 0 ? (100 / total) * filled : 0) + "%";
+          var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
             textY = height / 2;
 
           this.chart.ctx.fillText(text, textX, textY);
         }
       });
-  
-      
+
+
       var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
       this.state.chart = chart;
     };
 
     // return the chartjs instance
-    classData.getChart = function() {
+    classData.getChart = function () {
       return this.state.chart;
     };
 
     // return the canvass element that contains the chart
-    classData.getCanvass = function() {
+    classData.getCanvass = function () {
       return this.refs.canvass;
     };
 
     classData.getCanvas = classData.getCanvass;
 
     var i;
-    for (i=0; i<extras.length; i++) {
+    for (i = 0; i < extras.length; i++) {
       extra(extras[i]);
     }
-    for (i=0; i<methodNames.length; i++) {
+    for (i = 0; i < methodNames.length; i++) {
       extra(methodNames[i]);
     }
 
@@ -128,11 +131,11 @@ var dataKeys = {
   'Bar': 'bars'
 };
 
-var updatePoints = function(nextProps, chart, dataKey) {
+var updatePoints = function (nextProps, chart, dataKey) {
   var name = chart.name;
 
   if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
-    nextProps.data.forEach(function(segment, segmentIndex) {
+    nextProps.data.forEach(function (segment, segmentIndex) {
       if (!chart.segments[segmentIndex]) {
         chart.addData(segment);
       } else {
@@ -146,24 +149,28 @@ var updatePoints = function(nextProps, chart, dataKey) {
       chart.removeData();
     }
   } else {
-    while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
-      chart.removeData();
+    if (chart.scale) {
+      while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+        chart.removeData();
+      }
     }
-    nextProps.data.datasets.forEach(function(set, setIndex) {
-      set.data.forEach(function(val, pointIndex) {
-        if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
-          addData(nextProps, chart, setIndex, pointIndex);
-        } else {
-          chart.datasets[setIndex][dataKey][pointIndex].value = val;
-        }
+    if (nextProps.data && nextProps.data.datasets) {
+      nextProps.data.datasets.forEach(function (set, setIndex) {
+        set.data.forEach(function (val, pointIndex) {
+          if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
+            addData(nextProps, chart, setIndex, pointIndex);
+          } else {
+            chart.datasets[setIndex][dataKey][pointIndex].value = val;
+          }
+        });
       });
-    });
+    }
   }
 };
 
-var addData = function(nextProps, chart, setIndex, pointIndex) {
+var addData = function (nextProps, chart, setIndex, pointIndex) {
   var values = [];
-  nextProps.data.datasets.forEach(function(set) {
+  nextProps.data.datasets.forEach(function (set) {
     values.push(set.data[pointIndex]);
   });
   chart.addData(values, nextProps.data.labels[setIndex]);

From d002f2f97a8d8c658fd981ddadb36dbae3522720 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 16:25:25 -0600
Subject: [PATCH 30/39] Modified update function and added labelScale to chart
 options for the DoughnutWithTextInside component

---
 lib/core.js | 29 +++++++++++------------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index b567771..6a90cbe 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -40,20 +40,10 @@ module.exports = {
       chart.destroy();
     };
 
-    classData.componentWillReceiveProps = function (nextProps) {
+      classData.componentWillReceiveProps = function(nextProps) {
       var chart = this.state.chart;
-      if (nextProps.redraw) {
-        chart.destroy();
-        this.initializeChart(nextProps);
-      } else {
-        dataKey = dataKey || dataKeys[chart.name];
-        updatePoints(nextProps, chart, dataKey);
-        if (chart.scale) {
-          chart.scale.xLabels = nextProps.data.labels;
-          chart.scale.calculateXLabelRotation();
-        }
-        chart.update();
-      }
+      chart.data = nextProps.data;
+      chart.update();
     };
 
     classData.initializeChart = function (nextProps) {
@@ -62,17 +52,20 @@ module.exports = {
       var ctx = el.getContext("2d");
       Chart.types.Doughnut.extend({
         name: "DoughnutTextInside",
-        showTooltip: function () {
-          this.chart.ctx.save();
-          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
-          this.chart.ctx.restore();
+        // showTooltip: function () {
+        //   this.chart.ctx.save();
+        //   Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+        //   this.chart.ctx.restore();
+        // },
+        defaults: {
+          labelScale: 100
         },
         draw: function () {
           Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
           var width = this.chart.width,
             height = this.chart.height;
 
-          var fontSize = (height / 114).toFixed(2);
+          var fontSize = (height / this.options.labelScale).toFixed(2);
           this.chart.ctx.fillStyle = '#000';
           this.chart.ctx.font = fontSize + "em Verdana";
           this.chart.ctx.textBaseline = "middle";

From 6021af9e26f141e9d08e123a8d73b5a0d6a8ec51 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 17:01:43 -0600
Subject: [PATCH 31/39] Working towards changing the font size

---
 lib/core.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index 6a90cbe..128498f 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -65,9 +65,9 @@ module.exports = {
           var width = this.chart.width,
             height = this.chart.height;
 
-          var fontSize = (height / this.options.labelScale).toFixed(2);
+          //var fontSize = height.toFixed(2);
           this.chart.ctx.fillStyle = '#000';
-          this.chart.ctx.font = fontSize + "em Verdana";
+          this.chart.ctx.font = "1em 'Open Sans'";
           this.chart.ctx.textBaseline = "middle";
 
           var total = 0;

From 5732f9a9b4f18c912353c0410688069deafedaa6 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 17:05:30 -0600
Subject: [PATCH 32/39] testing

---
 lib/core.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index 128498f..1b4129e 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -65,9 +65,9 @@ module.exports = {
           var width = this.chart.width,
             height = this.chart.height;
 
-          //var fontSize = height.toFixed(2);
+          var fontSize = (height / this.options.labelScale).toFixed(2);
           this.chart.ctx.fillStyle = '#000';
-          this.chart.ctx.font = "1em 'Open Sans'";
+          this.chart.ctx.font = fontSize + "em 'Open Sans'";
           this.chart.ctx.textBaseline = "middle";
 
           var total = 0;

From 0dfb1f0eea887578af9ac55c312328acfb354226 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 18:42:15 -0600
Subject: [PATCH 33/39] updating

---
 lib/core.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index 1b4129e..ee8c0c9 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -52,11 +52,11 @@ module.exports = {
       var ctx = el.getContext("2d");
       Chart.types.Doughnut.extend({
         name: "DoughnutTextInside",
-        // showTooltip: function () {
-        //   this.chart.ctx.save();
-        //   Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
-        //   this.chart.ctx.restore();
-        // },
+        showTooltip: function () {
+          this.chart.ctx.save();
+          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+          this.chart.ctx.restore();
+        },
         defaults: {
           labelScale: 100
         },

From a0faeb1383d7612667f7efc8e80bec298d222ed3 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 20:09:44 -0600
Subject: [PATCH 34/39] looking into animation fix

---
 lib/core.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index ee8c0c9..c869762 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -40,7 +40,7 @@ module.exports = {
       chart.destroy();
     };
 
-      classData.componentWillReceiveProps = function(nextProps) {
+    classData.componentWillReceiveProps = function(nextProps) {
       var chart = this.state.chart;
       chart.data = nextProps.data;
       chart.update();
@@ -127,7 +127,7 @@ var dataKeys = {
 var updatePoints = function (nextProps, chart, dataKey) {
   var name = chart.name;
 
-  if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
+  if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut' || name === 'DoughnutTextInside') {
     nextProps.data.forEach(function (segment, segmentIndex) {
       if (!chart.segments[segmentIndex]) {
         chart.addData(segment);

From 51e1bb8bc97c299fe31b398b4533c5ca9b83b3d9 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 21:21:05 -0600
Subject: [PATCH 35/39] modifying core.js

---
 lib/core.js | 165 +++++++++++++++++++++++++++-------------------------
 1 file changed, 85 insertions(+), 80 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index c869762..ea64d05 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -1,170 +1,175 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
+var React = require('react')
+var ReactDOM = require('react-dom')
 
 module.exports = {
   createClass: function (chartType, methodNames, dataKey) {
     var classData = {
       displayName: chartType + 'Chart',
       getInitialState: function () {
-        return {};
+        return {}
       },
       render: function () {
         var _props = {
           ref: 'canvass'
-        };
+        }
         for (var name in this.props) {
           if (this.props.hasOwnProperty(name)) {
             if (name !== 'data' && name !== 'options') {
-              _props[name] = this.props[name];
+              _props[name] = this.props[name]
             }
           }
         }
-        return React.createElement('canvas', _props);
+        return React.createElement('canvas', _props)
       }
-    };
+    }
 
-    var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
+    var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData']
 
-    function extra(type) {
+    function extra (type) {
       classData[type] = function () {
-        return this.state.chart[type].apply(this.state.chart, arguments);
-      };
+        return this.state.chart[type].apply(this.state.chart, arguments)
+      }
     }
 
     classData.componentDidMount = function () {
-      this.initializeChart(this.props);
-    };
+      this.initializeChart(this.props)
+    }
 
     classData.componentWillUnmount = function () {
-      var chart = this.state.chart;
-      chart.destroy();
-    };
+      var chart = this.state.chart
+      chart.destroy()
+    }
 
-    classData.componentWillReceiveProps = function(nextProps) {
-      var chart = this.state.chart;
-      chart.data = nextProps.data;
-      chart.update();
-    };
+    classData.componentWillReceiveProps = function (nextProps) {
+      var chart = this.state.chart
+      if (nextProps.redraw) {
+        chart.destroy()
+        this.initializeChart(nextProps)
+      } else {
+        dataKey = dataKey || dataKeys[chart.name]
+        updatePoints(nextProps, chart, dataKey)
+        if (chart.scale) {
+          chart.scale.xLabels = nextProps.data.labels
+          chart.scale.calculateXLabelRotation()
+        }
+        chart.update()
+      }
+    }
 
     classData.initializeChart = function (nextProps) {
-      var Chart = require('chart.js');
-      var el = ReactDOM.findDOMNode(this);
-      var ctx = el.getContext("2d");
+      var Chart = require('chart.js')
+      var el = ReactDOM.findDOMNode(this)
+      var ctx = el.getContext('2d')
       Chart.types.Doughnut.extend({
-        name: "DoughnutTextInside",
+        name: 'DoughnutTextInside',
         showTooltip: function () {
-          this.chart.ctx.save();
-          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
-          this.chart.ctx.restore();
+          this.chart.ctx.save()
+          Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments)
+          this.chart.ctx.restore()
         },
         defaults: {
           labelScale: 100
         },
         draw: function () {
-          Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
+          Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments)
           var width = this.chart.width,
-            height = this.chart.height;
+            height = this.chart.height
 
-          var fontSize = (height / this.options.labelScale).toFixed(2);
-          this.chart.ctx.fillStyle = '#000';
-          this.chart.ctx.font = fontSize + "em 'Open Sans'";
-          this.chart.ctx.textBaseline = "middle";
+          var fontSize = (height / this.options.labelScale).toFixed(2)
+          this.chart.ctx.fillStyle = '#000'
+          this.chart.ctx.font = fontSize + "em 'Open Sans'"
+          this.chart.ctx.textBaseline = 'middle'
 
-          var total = 0;
-          var filled = 0;
-          var clone = this.segments.slice();
+          var total = 0
+          var filled = 0
+          var clone = this.segments.slice()
           clone.map(function (val) {
-            total = total + val.value;
+            total = total + val.value
           })
-          clone.pop();
+          clone.pop()
           clone.map(function (val) {
-            filled = filled + val.value;
+            filled = filled + val.value
           })
 
-          var text = Math.round(total > 0 ? (100 / total) * filled : 0) + "%";
+          var text = Math.round(total > 0 ? (100 / total) * filled : 0) + '%'
           var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
-            textY = height / 2;
+            textY = height / 2
 
-          this.chart.ctx.fillText(text, textX, textY);
+          this.chart.ctx.fillText(text, textX, textY)
         }
-      });
-
+      })
 
-      var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
-      this.state.chart = chart;
-    };
+      var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {})
+      this.state.chart = chart
+    }
 
     // return the chartjs instance
     classData.getChart = function () {
-      return this.state.chart;
-    };
+      return this.state.chart
+    }
 
     // return the canvass element that contains the chart
     classData.getCanvass = function () {
-      return this.refs.canvass;
-    };
+      return this.refs.canvass
+    }
 
-    classData.getCanvas = classData.getCanvass;
+    classData.getCanvas = classData.getCanvass
 
-    var i;
+    var i
     for (i = 0; i < extras.length; i++) {
-      extra(extras[i]);
+      extra(extras[i])
     }
     for (i = 0; i < methodNames.length; i++) {
-      extra(methodNames[i]);
+      extra(methodNames[i])
     }
 
-    return React.createClass(classData);
+    return React.createClass(classData)
   }
-};
+}
 
 var dataKeys = {
   'Line': 'points',
   'Radar': 'points',
   'Bar': 'bars'
-};
+}
 
 var updatePoints = function (nextProps, chart, dataKey) {
-  var name = chart.name;
+  var name = chart.name
 
   if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut' || name === 'DoughnutTextInside') {
     nextProps.data.forEach(function (segment, segmentIndex) {
       if (!chart.segments[segmentIndex]) {
-        chart.addData(segment);
+        chart.addData(segment)
       } else {
         Object.keys(segment).forEach(function (key) {
-          chart.segments[segmentIndex][key] = segment[key];
-        });
+          chart.segments[segmentIndex][key] = segment[key]
+        })
       }
-    });
-
-    while(nextProps.data.length < chart.segments.length) {
-      chart.removeData();
-    }
+    })
   } else {
     if (chart.scale) {
       while (chart.scale.xLabels.length > nextProps.data.labels.length) {
-        chart.removeData();
+        chart.removeData()
       }
     }
     if (nextProps.data && nextProps.data.datasets) {
       nextProps.data.datasets.forEach(function (set, setIndex) {
         set.data.forEach(function (val, pointIndex) {
-          if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
-            addData(nextProps, chart, setIndex, pointIndex);
+          if (typeof (chart.datasets[setIndex][dataKey][pointIndex]) == 'undefined') {
+            addData(nextProps, chart, setIndex, pointIndex)
           } else {
-            chart.datasets[setIndex][dataKey][pointIndex].value = val;
+            chart.datasets[setIndex][dataKey][pointIndex].value = val
           }
-        });
-      });
+        })
+      })
     }
   }
-};
+}
 
 var addData = function (nextProps, chart, setIndex, pointIndex) {
-  var values = [];
+  var values = []
   nextProps.data.datasets.forEach(function (set) {
-    values.push(set.data[pointIndex]);
-  });
-  chart.addData(values, nextProps.data.labels[setIndex]);
-};
+    values.push(set.data[pointIndex])
+  })
+  chart.addData(values, nextProps.data.labels[setIndex])
+}

From f6085125d3172fd447798400df93fa4ff837de7a Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 23:39:03 -0600
Subject: [PATCH 36/39] testing

---
 lib/core.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/core.js b/lib/core.js
index ea64d05..fecbd93 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -39,7 +39,10 @@ module.exports = {
       var chart = this.state.chart
       chart.destroy()
     }
-
+    classData.componentDidUpdate = function () {
+      var chart = this.state.chart
+      chart.update()
+    }
     classData.componentWillReceiveProps = function (nextProps) {
       var chart = this.state.chart
       if (nextProps.redraw) {

From c97c93dddfe055d5c892820a68e67909c1cc9f0d Mon Sep 17 00:00:00 2001
From: MalachiM <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 23:43:46 -0600
Subject: [PATCH 37/39] Revert "testing"

---
 lib/core.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index fecbd93..ea64d05 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -39,10 +39,7 @@ module.exports = {
       var chart = this.state.chart
       chart.destroy()
     }
-    classData.componentDidUpdate = function () {
-      var chart = this.state.chart
-      chart.update()
-    }
+
     classData.componentWillReceiveProps = function (nextProps) {
       var chart = this.state.chart
       if (nextProps.redraw) {

From 1969f3a0af357b794cace718231b5343b2df8941 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Thu, 11 Feb 2016 10:52:10 -0600
Subject: [PATCH 38/39] updating the draw function

---
 lib/core.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index ea64d05..40416c8 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -80,16 +80,12 @@ module.exports = {
           this.chart.ctx.font = fontSize + "em 'Open Sans'"
           this.chart.ctx.textBaseline = 'middle'
 
-          var total = 0
-          var filled = 0
+          var total = this.total
           var clone = this.segments.slice()
-          clone.map(function (val) {
-            total = total + val.value
-          })
           clone.pop()
-          clone.map(function (val) {
-            filled = filled + val.value
-          })
+          var filled = clone.reduce(function (a, val) {
+            return  a + val.value
+          }, 0)
 
           var text = Math.round(total > 0 ? (100 / total) * filled : 0) + '%'
           var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),

From fd29a752ac109e9ea8c21c81b4046fa88aad4df1 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Thu, 11 Feb 2016 11:04:01 -0600
Subject: [PATCH 39/39] updating draw function's apply call

---
 lib/core.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/core.js b/lib/core.js
index 40416c8..6c68f0e 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -71,7 +71,7 @@ module.exports = {
           labelScale: 100
         },
         draw: function () {
-          Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments)
+          Chart.types.Doughnut.prototype.draw.apply(this, arguments)
           var width = this.chart.width,
             height = this.chart.height