| commit | author | age | ||
| 83c3f6 | 1 | # Updating Charts |
| SP | 2 | |
| 3 | 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. | |
| 4 | ||
| 5 | ## Adding or Removing Data | |
| 6 | ||
| 7 | 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. | |
| 8 | ||
| 9 | ```javascript | |
| 10 | function addData(chart, label, data) { | |
| 11 | chart.data.labels.push(label); | |
| 12 | chart.data.datasets.forEach((dataset) => { | |
| 13 | dataset.data.push(data); | |
| 14 | }); | |
| 15 | chart.update(); | |
| 16 | } | |
| 17 | ||
| 18 | function removeData(chart) { | |
| 19 | chart.data.labels.pop(); | |
| 20 | chart.data.datasets.forEach((dataset) => { | |
| 21 | dataset.data.pop(); | |
| 22 | }); | |
| 23 | chart.update(); | |
| 24 | } | |
| 25 | ``` | |
| 26 | ||
| 27 | ## Updating Options | |
| 28 | ||
| 29 | To update the options, mutating the options property in place or passing in a new options object are supported. | |
| 30 | ||
| 31 | - If the options are mutated in place, other option properties would be preserved, including those calculated by Chart.js. | |
| 32 | - If created as a new object, it would be like creating a new chart with the options - old options would be discarded. | |
| 33 | ||
| 34 | ```javascript | |
| 35 | function updateConfigByMutating(chart) { | |
| 36 | chart.options.title.text = 'new title'; | |
| 37 | chart.update(); | |
| 38 | } | |
| 39 | ||
| 40 | function updateConfigAsNewObject(chart) { | |
| 41 | chart.options = { | |
| 42 | responsive: true, | |
| 43 | title:{ | |
| 44 | display:true, | |
| 45 | text: 'Chart.js' | |
| 46 | }, | |
| 47 | scales: { | |
| 48 | xAxes: [{ | |
| 49 | display: true | |
| 50 | }], | |
| 51 | yAxes: [{ | |
| 52 | display: true | |
| 53 | }] | |
| 54 | } | |
| 55 | } | |
| 56 | chart.update(); | |
| 57 | } | |
| 58 | ``` | |
| 59 | ||
| 60 | Scales can be updated separately without changing other options. | |
| 61 | To update the scales, pass in an object containing all the customization including those unchanged ones. | |
| 62 | ||
| 63 | Variables referencing any one from `chart.scales` would be lost after updating scales with a new `id` or the changed `type`. | |
| 64 | ||
| 65 | ```javascript | |
| 66 | function updateScales(chart) { | |
| 67 | var xScale = chart.scales['x-axis-0']; | |
| 68 | var yScale = chart.scales['y-axis-0']; | |
| 69 | chart.options.scales = { | |
| 70 | xAxes: [{ | |
| 71 | id: 'newId', | |
| 72 | display: true | |
| 73 | }], | |
| 74 | yAxes: [{ | |
| 75 | display: true, | |
| 76 | type: 'logarithmic' | |
| 77 | }] | |
| 78 | } | |
| 79 | chart.update(); | |
| 80 | // need to update the reference | |
| 81 | xScale = chart.scales['newId']; | |
| 82 | yScale = chart.scales['y-axis-0']; | |
| 83 | } | |
| 84 | ``` | |
| 85 | ||
| 86 | You can also update a specific scale either by specifying its index or id. | |
| 87 | ||
| 88 | ```javascript | |
| 89 | function updateScale(chart) { | |
| 90 | chart.options.scales.yAxes[0] = { | |
| 91 | type: 'logarithmic' | |
| 92 | } | |
| 93 | chart.update(); | |
| 94 | } | |
| 95 | ``` | |
| 96 | ||
| 97 | Code sample for updating options can be found in [toggle-scale-type.html](../../samples/scales/toggle-scale-type.html). | |
| 98 | ||
| 99 | ## Preventing Animations | |
| 100 | ||
| 101 | 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. | |
