diff --git a/src/mixins/reactiveData.js b/src/mixins/reactiveData.js index 7d8b1469..3b0df55d 100644 --- a/src/mixins/reactiveData.js +++ b/src/mixins/reactiveData.js @@ -26,7 +26,26 @@ module.exports = { // Check if Labels are equal and if dataset length is equal if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) { newData.datasets.forEach((dataset, i) => { - chart.data.datasets[i] = dataset + // Get new and old dataset keys + const oldDatasetKeys = Object.keys(oldData.datasets[i]) + const newDatasetKeys = Object.keys(dataset) + + // Get keys that aren't present in the new data + const deletionKeys = oldDatasetKeys.filter((key) => { + return key !== '_meta' && newDatasetKeys.indexOf(key) === -1 + }) + + // Remove outdated key-value pairs + deletionKeys.forEach((deletionKey) => { + delete chart.data.datasets[i][deletionKey] + }) + + // Update attributes individually to avoid re-rendering the entire chart + for (const attribute in dataset) { + if (dataset.hasOwnProperty(attribute)) { + chart.data.datasets[i][attribute] = dataset[attribute] + } + } }) chart.data.labels = newData.labels diff --git a/src/mixins/reactiveProp.js b/src/mixins/reactiveProp.js index a4f520ed..059ebbee 100644 --- a/src/mixins/reactiveProp.js +++ b/src/mixins/reactiveProp.js @@ -4,7 +4,6 @@ module.exports = { required: true } }, - watch: { 'chartData': { handler (newData, oldData) { @@ -27,7 +26,26 @@ module.exports = { // Check if Labels are equal and if dataset length is equal if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) { newData.datasets.forEach((dataset, i) => { - chart.data.datasets[i] = dataset + // Get new and old dataset keys + const oldDatasetKeys = Object.keys(oldData.datasets[i]) + const newDatasetKeys = Object.keys(dataset) + + // Get keys that aren't present in the new data + const deletionKeys = oldDatasetKeys.filter((key) => { + return key !== '_meta' && newDatasetKeys.indexOf(key) === -1 + }) + + // Remove outdated key-value pairs + deletionKeys.forEach((deletionKey) => { + delete chart.data.datasets[i][deletionKey] + }) + + // Update attributes individually to avoid re-rendering the entire chart + for (const attribute in dataset) { + if (dataset.hasOwnProperty(attribute)) { + chart.data.datasets[i][attribute] = dataset[attribute] + } + } }) chart.data.labels = newData.labels