2021-03-30 16:32:39 +02:00
# Updating Charts
2017-04-24 01:53:31 +02:00
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) {
2020-11-25 07:50:12 +01:00
chart.options.plugins.title.text = 'new title';
2017-11-29 22:52:23 +01:00
chart.update();
}
function updateConfigAsNewObject(chart) {
chart.options = {
responsive: true,
2020-11-30 15:59:20 +01:00
plugins: {
title: {
display: true,
text: 'Chart.js'
}
2017-11-29 22:52:23 +01:00
},
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) {
2021-10-30 15:23:14 +02:00
let xScale = chart.scales.x;
let 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();
}
```
2022-10-06 16:36:26 +02:00
Code sample for updating options can be found in [line-datasets.html ](https://www.chartjs.org/docs/latest/samples/area/line-datasets.html ).
2017-11-29 22:52:23 +01:00
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.
2022-06-01 20:38:39 +02:00
```javascript
myChart.update('none');
```