Updating datasets with points

Expected Behavior

In version 2.9.3, when you want to update a datasets with data as points (i.e.scatter), you could change the “point” object in its x and y properties. The following code is “randomize” implementation (updated by me to show how it works in 2.9.3) of Scatter chart in CHART.js samples.

document.getElementById('randomizeData').addEventListener('click', function() {
	scatterChartData.datasets.forEach(function(dataset) {
		dataset.data.forEach(function(item) {
			item.x = randomScalingFactor();
			item.y = randomScalingFactor();
		});
	});
	window.myScatter.update();
});

Current Behavior

With version 3, the above code does not work and the data points are not updated and the chart does not change the data representation.

To work properly it seems you have to create every time new point objects (not good for performance), as the code of Scatter chart sample is showing:

document.getElementById('randomizeData').addEventListener('click', function() {
	scatterChartData.datasets.forEach(function(dataset) {
		dataset.data = dataset.data.map(function() {
			return {
				x: randomScalingFactor(),
				y: randomScalingFactor()
			};
		});
	});
	window.myScatter.update();
});

Possible Solution

In my opinion it should work as was in version 2.9.3 because it’s more efficient.

Environment

• Chart.js version: DevBuild: https://www.chartjs.org/dist/master/chart.min.js
• Browser name and version: FF 76.0.1

[kurkle]

The demo is modifying Input data, not elements. ArrayEquals fails to notice the change (compares the objects, and those are still the same). I’d consider this to be a bug.

(assuming dataset.data is the Input data, I did not verify)

[benmccann]

Thanks for the correction @kurkle! I agree this seems like a bug to fix. Maybe we should remove the data checks and just support the splice/push/etc. API for fast data modification?

@stockiNail super glad for all your feedback. We’ve only had one alpha so far, so it’s still very early and appreciated!! 😃