diff --git a/docs/developers/updates.md b/docs/developers/updates.md index 06550ce0cec..ac3d6cc9ec1 100644 --- a/docs/developers/updates.md +++ b/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 @@ -14,9 +14,7 @@ function addData(chart, label, data) { }); chart.update(); } -``` -```javascript function removeData(chart) { chart.data.labels.pop(); chart.data.datasets.forEach((dataset) => { @@ -26,6 +24,68 @@ function removeData(chart) { } ``` +## Opdating Options + +To update the options, mutating the options property inplace or passing in a new options object are supported. + +- If the options are mutated inplace, other option 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'; + chart.update(); +} + +function updateConfigAsNewObject(chart) { + chart.options = { + responsive: true, + title:{ + display:true, + text: 'Chart.js' + }, + scales: { + xAxes: [{ + display: true + }], + yAxes: [{ + display: true + }] + } + } + 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.scleas = { + xAxes: [{ + // omitting id will generate 'x-axis-0' + display: true + }], + yAxes: [{ + id: 'newId' + display: true, + type: 'logarithmic' + }] + } + chart.update(); + // need to update the refernce + yScale = chart.scales.newId; +} +``` + + +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. \ No newline at end of file