💎 Release new version 2.3.5

Signed-off-by: Jakub Juszczak <netghost03@gmail.com>

dist/vue-chartjs.js

@@ -42978,38 +42978,38 @@ return /******/ (function(modules) { // webpackBootstrap
 	  watch: {
 	    'chartData': {
 	      handler: function handler(newData, oldData) {
+	        var _this = this;
+
 	        if (oldData) {
-	          var chart = this._chart;
+	          (function () {
+	            var chart = _this._chart;
 
-	          var newDataLabels = newData.datasets.map(function (dataset) {
+	            var newDatasetLabels = newData.datasets.map(function (dataset) {
-	            return dataset.label;
+	              return dataset.label;
-	          });
+	            });
 
-	          var oldDataLabels = oldData.datasets.map(function (dataset) {
+	            var oldDatasetLabels = oldData.datasets.map(function (dataset) {
-	            return dataset.label;
+	              return dataset.label;
-	          });
+	            });
 
-	          if ((0, _stringify2.default)(newDataLabels) === (0, _stringify2.default)(oldDataLabels)) {
+	            var oldLabels = (0, _stringify2.default)(oldDatasetLabels);
-	            this.forceUpdate(newData, chart);
+	            var newLabels = (0, _stringify2.default)(newDatasetLabels);
-	          } else {
+
-	            this.forceRender();
+	            if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
-	          }
+	              newData.datasets.forEach(function (dataset, i) {
+	                chart.data.datasets[i].data = dataset.data;
+	              });
+
+	              chart.data.labels = newData.labels;
+	              chart.update();
+	            } else {
+	              chart.destroy();
+	              _this.renderChart(_this.chartData, _this.options);
+	            }
+	          })();
 	        }
 	      }
 	    }
-	  },
-	  methods: {
-	    forceUpdate: function forceUpdate(newData, chart) {
-	      newData.datasets.forEach(function (dataset, i) {
-	        chart.data.datasets[i].data = dataset.data;
-	      });
-
-	      chart.data.labels = newData.labels;
-	      chart.update();
-	    },
-	    forceRender: function forceRender() {
-	      this.renderChart(this.chartData, this.options);
-	    }
 	  }
 	};
 
@@ -43064,21 +43064,26 @@ return /******/ (function(modules) { // webpackBootstrap
 	          (function () {
 	            var chart = _this._chart;
 
-	            var newDataLabels = newData.datasets.map(function (dataset) {
+	            var newDatasetLabels = newData.datasets.map(function (dataset) {
 	              return dataset.label;
 	            });
 
-	            var oldDataLabels = oldData.datasets.map(function (dataset) {
+	            var oldDatasetLabels = oldData.datasets.map(function (dataset) {
 	              return dataset.label;
 	            });
 
-	            if ((0, _stringify2.default)(newDataLabels) === (0, _stringify2.default)(oldDataLabels)) {
+	            var oldLabels = (0, _stringify2.default)(oldDatasetLabels);
+	            var newLabels = (0, _stringify2.default)(newDatasetLabels);
+
+	            if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
 	              newData.datasets.forEach(function (dataset, i) {
 	                chart.data.datasets[i].data = dataset.data;
 	              });
+
 	              chart.data.labels = newData.labels;
 	              chart.update();
 	            } else {
+	              chart.destroy();
 	              _this.renderChart(_this.chartData, _this.options);
 	            }
 	          })();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@nextindex.de>",
   "repository": {

src/mixins/reactiveData.js

@@ -10,35 +10,33 @@ module.exports = {
         if (oldData) {
           let chart = this._chart
 
-          let newDataLabels = newData.datasets.map((dataset) => {
+          // Get new and old DataSet Labels
+          let newDatasetLabels = newData.datasets.map((dataset) => {
             return dataset.label
           })
 
-          let oldDataLabels = oldData.datasets.map((dataset) => {
+          let oldDatasetLabels = oldData.datasets.map((dataset) => {
             return dataset.label
           })
 
-          if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
+          // Stringify 'em for easier compare
-            this.forceUpdate(newData, chart)
+          const oldLabels = JSON.stringify(oldDatasetLabels)
+          const newLabels = JSON.stringify(newDatasetLabels)
+
+          // Check if Labels are equal and if dataset length is equal
+          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
+            newData.datasets.forEach((dataset, i) => {
+              chart.data.datasets[i].data = dataset.data
+            })
+
+            chart.data.labels = newData.labels
+            chart.update()
           } else {
-            this.forceRender()
+            chart.destroy()
+            this.renderChart(this.chartData, this.options)
           }
         }
       }
     }
-  },
-  methods: {
-    forceUpdate (newData, chart) {
-      newData.datasets.forEach((dataset, i) => {
-        chart.data.datasets[i].data = dataset.data
-      })
-
-      chart.data.labels = newData.labels
-      chart.update()
-    },
-
-    forceRender () {
-      this.renderChart(this.chartData, this.options)
-    }
   }
 }

src/mixins/reactiveProp.js

@@ -11,21 +11,29 @@ module.exports = {
         if (oldData) {
           let chart = this._chart
 
-          let newDataLabels = newData.datasets.map((dataset) => {
+          // Get new and old DataSet Labels
+          let newDatasetLabels = newData.datasets.map((dataset) => {
             return dataset.label
           })
 
-          let oldDataLabels = oldData.datasets.map((dataset) => {
+          let oldDatasetLabels = oldData.datasets.map((dataset) => {
             return dataset.label
           })
 
-          if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
+          // Stringify 'em for easier compare
+          const oldLabels = JSON.stringify(oldDatasetLabels)
+          const newLabels = JSON.stringify(newDatasetLabels)
+
+          // Check if Labels are equal and if dataset length is equal
+          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
             newData.datasets.forEach((dataset, i) => {
               chart.data.datasets[i].data = dataset.data
             })
+
             chart.data.labels = newData.labels
             chart.update()
           } else {
+            chart.destroy()
             this.renderChart(this.chartData, this.options)
           }
         }