chartJS - points overplotting, jittering, noise? - charts

Question

Hey I'm using chartJS and I have a graph that looks like this:
As you can see the data points overlap each other which makes it harder to read. In RStudio there is a solution for that you simply set position="jittering" and it will add a slight noise around the dots.

Answer 1

Unfortunately, there is no such capability in chart.js today. However, that doesn't mean you can't still get the functionality that you want. There are a couple of options that come to mind.
1) Implement your own jitter function and use it to pre-process your data before passing to chart.js. Here is an example.
var jitter = function(data) {
return data.map(function(e) {
var xJitter = Math.random() * (-1 - 1) + 1;
var yJitter = Math.random() * (-1 - 1) + 1;
return {
x: e.x + xJitter,
y: e.y + yJitter,
}
});
};
Here is a codepen example showing a side by side example of charts with original and jittered data.
2) Use the jitter function above and add it as a chart.js plugin such that you can enable/disable it automatically in any given chart. Here is an example (note that we are using the jitter function above.
Chart.plugins.register({
afterInit: function(chartInstance) {
if (chartInstance.config.options.jitter) {
var helpers = Chart.helpers;
var ctx = chartInstance.chart.ctx;
chartInstance.data.datasets.forEach(function (dataset) {
dataset.data = jitter(dataset.data);
});
}
}
});
Then just add this into your charts options config.
options: {
jitter: true,
}
Here is a codepen example showing a side by side example of charts with original and jittered data using the plugin.
Obviously, you would want to implement a much more robust jitter function that accepts some sort of jitter options so that it can be intelligently applied to any type of dataset. I'll leave that for you to implement if you decide to take this approach.