Custom scatter chart extended from scatter chart becomes line chart - chart.js

Question

I'm unable to find an explanation so as why my customized scatter charts display a line chart instead.
I've created this custom chart by extending it from scatter using the basic :
Chart.defaults.scatterCustom = Chart.defaults.scatter;
Chart.controllers.scatterCustom = Chart.controllers.scatter.extend({ ...
Following is the entire code i'm using and a fiddle to illustrate my problem.
We can see the 3 differents charts, 2 are default scatter and one is customScatter.
The draw function was added later, thinking it would bring back the normal behaviour but it doesn't change anything.
Any help greatly appreciated!
tidechart = {
tideChart: "",
initTidechart: function() {
Chart.defaults.scatterCustom = Chart.defaults.scatter;
Chart.controllers.scatterCustom = Chart.controllers.scatter.extend({
draw: function(ease) {
Chart.controllers.scatter.prototype.draw.call(this, ease);
},
fireSliderEvent: function(point, canvas, boundingRect) {
var mouseX = Math.round((boundingRect.left + point._view.x) / (boundingRect.right - boundingRect.left) * canvas.width / this.chart.chart.currentDevicePixelRatio);
var mouseY = Math.round((boundingRect.top + point._view.y) / (boundingRect.bottom - boundingRect.top) * canvas.height / this.chart.chart.currentDevicePixelRatio);
var oEvent = document.createEvent('MouseEvents');
oEvent.initMouseEvent('click', true, true, document.defaultView,
0, mouseX, mouseY, mouseX, mouseY,
false, false, false, false, 0, canvas);
canvas.dispatchEvent(oEvent);
},
highlightPointsByIndex: function(datasetIndex, index) {
var canvas = this.chart.canvas;
var boundingRect = canvas.getBoundingClientRect();
var points = this.chart.getDatasetMeta(datasetIndex).data;
this.fireSliderEvent(points[index], canvas, boundingRect);
},
highlightPointsByValue: function(points, value) {
var dataPoints = this._data;
for (var index = 0; index < dataPoints.length; ++index) {
if (dataPoints[index].toString() === value.toString()) {
this.highlightPointsByIndex(points, index);
break;
}
}
}
});
tideChartOptions = {
maintainAspectRatio: false,
legend: {
display: true
},
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest",
filter: function(tooltipItem) {
return tooltipItem.datasetIndex != 0;
}
},
responsive: true,
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Tide level'
},
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin: 0,
suggestedMax: 10,
padding: 20,
fontColor: "#9a9a9a"
},
afterTickToLabelConversion: function(q) {
for (var tick in q.ticks) {
q.ticks[tick] += ' m';
}
},
}],
xAxes: [{
display: true,
type: 'time',
time: {
parser: 'YYYY-MM-DD HH:mm:ss',
tooltipFormat: 'll HH:mm',
unit: 'day',
unitStepSize: 1,
displayFormats: {
'month': 'MMM DD'
}
},
gridLines: {
drawBorder: false,
color: 'rgba(225,78,202,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9a9a9a"
}
}]
}
};
var data = {
labels: ['01/01/2020','01/02/2020','01/03/2020','01/04/2020'],
datasets: [
{
label: 'Camera 1',
type: 'scatter',
fill: false,
backgroundColor: '#2DAAE1',
borderColor: '#2DAAE1',
borderWidth: 0,
pointBackgroundColor: '#2DAAE1',
pointHoverBackgroundColor: '#2DAAE1',
pointBorderWidth: 0,
pointHoverRadius: 5,
pointRadius: 2,
data: [1,5,6,7]
},
{
fill: false,
type: 'scatter',
label: 'Camera 2',
backgroundColor: '#FFC329',
borderColor: '#FFC329',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#FFC329',
pointHoverBackgroundColor: '#FFC329',
pointBorderWidth: 0,
pointHoverRadius: 5,
pointRadius: 2,
data: [3,2,8,1]
},
{
fill: false,
type: 'scatterCustom',
label: 'Camera 3',
backgroundColor: '#FF5229',
borderColor: '#FF5229',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#FF5229',
pointHoverBackgroundColor: '#FF5229',
pointBorderWidth: 0,
pointHoverRadius: 5,
pointRadius: 2,
data: [8,4,5,3]
}
]
};
//tidechart.tideChart = new Chart(ctx, config);
tidechart.tideChart = new Chart($("#tidechart"), {
data: data,
options: tideChartOptions
});
}
}
tidechart.initTidechart();

Answer 1

This solves it
Chart.defaults.global.datasets.scatterCustom = Chart.defaults.global.datasets.scatter;