Skip to content

Commit

Permalink
update document about options update
Browse files Browse the repository at this point in the history
  • Loading branch information
xg-wang committed Aug 21, 2017
1 parent 123bf03 commit 62098c2
Showing 1 changed file with 41 additions and 1 deletion.
42 changes: 41 additions & 1 deletion docs/developers/updates.md
@@ -1,6 +1,6 @@
# 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.
It's pretty common to want to update charts after they've been created. When the chart data or options are changed, Chart.js will animate to the new data values and options.

## Adding or Removing Data

Expand All @@ -26,6 +26,46 @@ function removeData(chart) {
}
```

## Opdating Options

To update the options, mutating the options propery inplace or passing in a new options object are supported.

- If the options are mutated inplace, other options properties would be preserved.
- If created as a new object, it would be like creating a new chart with the options - old options would be discarded.

```javascript
function updateConfigByMutating(chart) {
chart.options.title.text = 'new title';
}
```

```javascript
function updateConfigAsNewObject(chart) {
chart.options = {
responsive: true,
title:{
display:true,
text: 'Chart.js'
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true
}]
}
}
}
```

Scales can be updated separately without changing other options.
It is recommended to update scales by creating a new object rather than mutating the properties to be changed, unless you are confident all scales options would update as you wish - especially when upating type of the scale.

Variables referencing the scale of the chart would be lost after updating with a new id or the changed type.

Code sample for updating options can be found in [toggle-scale-type.html](../../samples/scales/toggle-scale-type.html).

## 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.

0 comments on commit 62098c2

Please sign in to comment.