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: {
2019-11-22 00:46:49 +01:00
x: {
2017-11-29 22:52:23 +01:00
display: true
2019-11-22 00:46:49 +01:00
},
y: {
2017-11-29 22:52:23 +01:00
display: true
2019-11-22 00:46:49 +01:00
}
2017-11-29 22:52:23 +01:00
}
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) {
2019-11-22 00:46:49 +01:00
var xScale = chart.scales.x;
var yScale = chart.scales.y;
2017-11-29 22:52:23 +01:00
chart.options.scales = {
2019-11-22 00:46:49 +01:00
newId: {
2017-11-29 22:52:23 +01:00
display: true
2019-11-22 00:46:49 +01:00
},
y: {
2017-11-29 22:52:23 +01:00
display: true,
type: 'logarithmic'
2019-11-22 00:46:49 +01:00
}
2019-01-29 13:34:16 +01:00
};
2017-11-29 22:52:23 +01:00
chart.update();
// need to update the reference
2019-11-22 00:46:49 +01:00
xScale = chart.scales.newId;
yScale = chart.scales.y;
2017-11-29 22:52:23 +01:00
}
```
2019-11-22 00:46:49 +01:00
You can also update a specific scale either by its id.
2017-11-29 22:52:23 +01:00
```javascript
function updateScale(chart) {
2019-11-22 00:46:49 +01:00
chart.options.scales.y = {
2017-11-29 22:52:23 +01:00
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-12-27 23:13:24 +01:00
Sometimes when a chart updates, you may not want an animation. To achieve this you can call `update` with `'none'` as mode.