Merge branch 'master' of github.com:jhudson8/react-chartjs

README.md

@@ -35,7 +35,7 @@ var MyComponent = React.createClass({
 * ```data``` represents the chart data (see [chart.js](http://www.chartjs.org/) for details)
 * ```options``` represents the chart options (see [chart.js](http://www.chartjs.org/) for details)
 * all other parameters will be passed through to the ```canvas``` element
-
+* if data passed into the component changes, points will animate between values using chart.js' ```.update()```. If you want the chart destroyed and redrawn on every change, pass in ```redraw``` as a prop. For example ```<LineChart data={this.state.chartData} redraw />```
 
 Chart References
 ----------------

lib/core.js

@@ -36,8 +36,13 @@ module.exports = {
 
     classData.componentWillReceiveProps = function(nextProps) {
       var chart = this.state.chart;
-      chart.destroy();
-      this.initializeChart(nextProps);
+      if (this.props.redraw) {
+        chart.destroy();
+        this.initializeChart(nextProps);
+      } else {
+        updatePoints(nextProps, chart);
+        chart.update();
+      }
     };
 
     classData.initializeChart = function(nextProps) {
@@ -70,3 +75,30 @@ module.exports = {
     return React.createClass(classData);
   }
 };
+
+var dataKeys = {
+  'Line': 'points',
+  'Radar': 'points',
+  'Bar': 'bars'
+};
+
+var updatePoints = function(nextProps, chart) {
+  var name = chart.name;
+
+  if (name === 'PolarArea' || name === 'Pie') {
+    nextProps.data.forEach(function(segment, segmentIndex) {
+      chart.segments[segmentIndex].value = segment.value;
+    });
+  } else {
+    var dataKey = dataKeys[name];
+    nextProps.data.datasets.forEach(function(set, setIndex) {
+      set.data.forEach(function(val, pointIndex) {
+        chart.datasets[setIndex][dataKey][pointIndex].value = val;
+      });
+    });
+  }
+};
+
+
+
+