2017-04-24 01:53:31 +02:00
# Updating Charts
2017-11-29 22:52:23 +01:00
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.
2017-04-24 01:53:31 +02:00
## 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();
}
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();
}
```
2017-11-29 22:52:23 +01:00
## Updating Options
To update the options, mutating the options property in place or passing in a new options object are supported.
- If the options are mutated in place, other option properties would be preserved, including those calculated by Chart.js.
- 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';
chart.update();
}
function updateConfigAsNewObject(chart) {
chart.options = {
responsive: true,
2019-01-29 13:34:16 +01:00
title: {
display: true,
2017-11-29 22:52:23 +01:00
text: 'Chart.js'
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true
}]
}
2019-01-29 13:34:16 +01:00
};
2017-11-29 22:52:23 +01:00
chart.update();
}
```
Scales can be updated separately without changing other options.
To update the scales, pass in an object containing all the customization including those unchanged ones.
Variables referencing any one from `chart.scales` would be lost after updating scales with a new `id` or the changed `type` .
```javascript
function updateScales(chart) {
var xScale = chart.scales['x-axis-0'];
var yScale = chart.scales['y-axis-0'];
chart.options.scales = {
xAxes: [{
id: 'newId',
display: true
}],
yAxes: [{
display: true,
type: 'logarithmic'
}]
2019-01-29 13:34:16 +01:00
};
2017-11-29 22:52:23 +01:00
chart.update();
// need to update the reference
xScale = chart.scales['newId'];
yScale = chart.scales['y-axis-0'];
}
```
You can also update a specific scale either by specifying its index or id.
```javascript
function updateScale(chart) {
chart.options.scales.yAxes[0] = {
type: 'logarithmic'
2019-01-29 13:34:16 +01:00
};
2017-11-29 22:52:23 +01:00
chart.update();
}
```
Code sample for updating options can be found in [toggle-scale-type.html ](../../samples/scales/toggle-scale-type.html ).
2017-04-24 01:53:31 +02:00
## Preventing Animations
2019-01-29 13:34:16 +01:00
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.