initial data update docs

docs/SUMMARY.md

@@ -40,6 +40,7 @@
   * [Styling](axes/styling.md)
 * [Developers](developers/README.md)
   * [Chart.js API](developers/api.md)
+  * [Updating Charts](developers/updates.md)
   * [Plugins](developers/plugins.md)
   * [New Charts](developers/charts.md)
   * [New Axes](developers/axes.md)

docs/developers/api.md

@@ -30,6 +30,8 @@ myLineChart.update(); // Calling update now animates the position of March from
 
 > **Note:** replacing the data reference (e.g. `myLineChart.data = {datasets: [...]}` only works starting **version 2.6**. Prior that, replacing the entire data object could be achieved with the following workaround: `myLineChart.config.data = {datasets: [...]}`.
 
+See [Updating Charts](updates.md) for more details.
+
 ## .reset()
 
 Reset the chart to it's state before the initial animation. A new animation can then be triggered using `update`.

docs/developers/updates.md

@@ -0,0 +1,31 @@
+# Updating Charts
+
+It's pretty common to want to update charts after they've been created. When the chart data is changed, Chart.js will animate to the new data values. 
+
+## Adding or Removing Data
+
+Adding and removing data is supported by changing the data array. To add data, just add data into the data array as seen in this example.
+
+```javascript
+function addData(chart, label, data) {
+    chart.data.labels.push(label);
+    chart.data.datasets.forEach((dataset) => {
+        dataset.data.push(data);
+    });
+    chart.update();
+}
+```
+
+```javascript
+function removeData(chart) {
+    chart.data.labels.pop();
+    chart.data.datasets.forEach((dataset) => {
+        dataset.data.pop();
+    });
+    chart.update();
+}
+```
+
+## Preventing Animations
+
+Sometimes when a chart updates, you may not want an animation. To achieve this you can call `update` with a duration of `0`. This will render the chart synchronously and without an animation.