initial data update docs

diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
index d7950fed9e1c2791590182fe1699edc345f8ca53..5ec896e40cad538f138d344f6a8526e97532d1a5 100644 (file)
--- a/docs/SUMMARY.md
+++ b/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)

diff --git a/docs/developers/api.md b/docs/developers/api.md
index 03dbe797fd88c46e61a3d4b117759d5b6342a8bf..714cb580a36feaff9409398b363d9a51e86335b4 100644 (file)
--- a/docs/developers/api.md
+++ b/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`.

diff --git a/docs/developers/updates.md b/docs/developers/updates.md
new file mode 100644 (file)
index 0000000..06550ce
--- /dev/null
+++ b/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.
\ No newline at end of file