I made an application that displays a chart (Line) from the Chart.js library. According to the value of the "date" attribute, the pointer may vary: below 25 a triangle is displayed and from 25 upwards an image is displayed, which in this case is a sun.
Displaying a single chart, the code works perfectly. However, when you try to place a second chart on the same page, the second chart only appears when you hover the mouse next to the first one. I am using jQuery inside the pluginService.register function to control the pointer customization.
Here is an HTML code snippet:
<body>
<div class="container-fluid">
<div class=row>
<div class="col-6"><canvas id="canvas"></canvas></div>
<div class="col-6"><canvas id="canvas2"></canvas></div>
</div>
</div>
Following Javascript:
var sun = new Image();
sun.src = 'https://i.imgur.com/yDYW1I7.png';
sun.width = 30;
sun.height = 30;
Chart.pluginService.register({
afterUpdate: function(chart,chart2) {
$.each(chart.config.data.datasets[0].data, function(index, value){
if(value < 25){
chart.config.data.datasets[0]._meta[0].data[index]._model.pointStyle = 'triangle';
} else{
chart.config.data.datasets[0]._meta[0].data[index]._model.pointStyle = sun;
}
});
}
});
var config = {
type: 'line',
data: {
labels: ['','10', '500', '1000', '2000', '3000', '4000', '6000', '8000', '10000'],
datasets: [{
label: 'Esquerda',
fill: false,
backgroundColor: '#166a8f',
borderColor: '#166a8f',
pointBorderColor: 'rgb(65,105,225)',
pointBorderWidth: 3,
pointBackgroundColor: "#fff",
pointRadius: 10,
pointStyle: 'circle',
showLine: true,
data: [ NaN,
10,
10,
20,
5,
40,
80
],
}, {
label: 'Dashed',
fill: false,
pointRadius: 0,
borderColor: '#000',
borderDash: [5, 5],
data: [
25,
25,
25,
25,
25,
25,
25,
25,
25,
25
],
}]
},
options: {
legend: {
display: false
},
elements: {
line: {
tension: 0.000001
}
},
responsive: true,
title: {
display: true,
fontSize: 30,
text: 'Titulo 1'
},
tooltips: {
enabled: false,
mode: 'index',
intersect: false,
backgroundColor: 'rgba(0,0,0,0.8)'
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
position: 'top',
gridLines: {
display:true,
color: '#000',
lineWidth: 1
},
display: true,
scaleLabel: {
display: true,
labelString: 'Escrever algo aqui'
}
}],
yAxes: [{
ticks: {
mirror: false,
reverse:true
},
gridLines: {
display:true,
color: '#000',
lineWidth: 1
},
display: true,
scaleLabel: {
display: true,
labelString: 'Escrever algo aqui'
}
}]
}
}
};
var config2 = {
type: 'line',
data: {
labels: ['','10', '500', '1000', '2000', '3000', '4000', '6000', '8000', '10000'],
datasets: [{
label: 'Direito',
fill: false,
backgroundColor: '#166a8f',
borderColor: '#166a8f',
pointBorderColor: 'rgb(65,105,225)',
pointBorderWidth: 3,
pointBackgroundColor: "#fff",
pointRadius: 10,
pointStyle: 'circle',
showLine: true,
data: [ NaN,
10,
10,
20,
5,
40,
80
],
}, {
label: 'Dashed',
fill: false,
pointRadius: 0,
backgroundColor: '#166a8f',
borderColor: '#000',
borderDash: [5, 5],
data: [
25,
25,
25,
25,
25,
25,
25,
25,
25,
25
],
}]
},
options: {
legend: {
display: false
},
elements: {
line: {
tension: 0.000001
}
},
responsive: true,
title: {
display: true,
fontSize: 30,
text: 'Titulo 2'
},
tooltips: {
enabled: false,
mode: 'index',
intersect: false,
backgroundColor: 'rgba(0,0,0,0.8)'
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
position: 'top',
gridLines: {
display:true,
color: '#000',
lineWidth: 1
},
display: true,
scaleLabel: {
display: true,
labelString: 'Escrever algo aqui'
}
}],
yAxes: [{
ticks: {
mirror: false,
reverse:true
},
gridLines: {
display:true,
color: '#000',
lineWidth: 1
},
display: true,
scaleLabel: {
display: true,
labelString: 'Escrever algo aqui'
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
var ctx2 = document.getElementById('canvas2').getContext('2d');
window.myLine2 = new Chart(ctx2, config2);
};
The error returned in the console is as follows:
Uncaught TypeError: Cannot read property 'data' of undefined
at Number.<anonymous> (canvas2.php:65)
at Function.each (jquery-3.3.1.js:354)
at Object.afterUpdate (canvas2.php:59)
at Object.notify (Chart.js:6754)
at Chart.update (Chart.js:4234)
at Chart.resize (Chart.js:4022)
at listener (Chart.js:4621)
at Chart.js:10777
at Chart.js:10669
I'd like to put the two graphics on the same page, so it's possible they both had the custom pointers.
I have tried every way to the best of my knowledge, but without any success. An aid would be greatly appreciated.
Follow the CodePen link, with full code there: link