I tried to draw more than two charts with Chart.js on the same page and created a dynamic div in a loop with all the data for the chart like this:
<div class="col-4">
<canvas class="trend-chart" id="chart{{ p.sNo }}" width="500" height="100" role="img" data-pv="{{ p.recentPageViews }}">
</canvas>
</div>
The JavaScript code to dynamically create a charts based on the class name:
const labels = [
'22-12-12',
'22-12-13',
'22-12-14',
'22-12-15',
'22-12-16',
'22-12-17',
'22-12-18',
'22-12-19',
'22-12-20',
'22-12-21'
];
const config = {
type: 'line',
animation: true,
options: {}
};
var charts = document.getElementsByClassName("trend-chart");
for (var i = 0; i < charts.length; i++) {
pv = charts[i].getAttribute('data-pv');
id = charts[i].getAttribute('id');
window['config' + id] = config;
window['data' + id] = {
labels: labels,
datasets: [{
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: JSON.parse(pv),
}]
};
window['config' + id]['data'] = window['data' + id];
window['ctx' + id] = document.getElementById(id).getContext('2d');
window['myChart' + id] = new Chart(
window['ctx' + id],
window['config' + id]
);
}
Everything works fine except the tooltip when I mouse hover to the chart data points. I am not seeing the tooltip and I get the following error:
Uncaught TypeError: Cannot read properties of null (reading 'getLabelAndValue')
at Eo (chart.js:13)
at Ho._createItems (chart.js:13)
at Ho.update (chart.js:13)
at Ho.handleEvent (chart.js:13)
at Object.afterEvent (chart.js:13)
at Q (chart.js:13)
at Vs._notify (chart.js:13)
at Vs.notify (chart.js:13)
at hn.notifyPlugins (chart.js:13)
at hn._eventHandler (chart.js:13)*
Please add label property in the datasets as per below code.
datasets: [{
label: 'Some text',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: JSON.parse(pv),
}]
Hi figure it out how to fix it, the main issue the context is not setting properly so I did like below to overcome
window.addEventListener('load', function() {
var charts = document.getElementsByClassName("trend-chart");
for (var i = 0; i < charts.length; i++) {
pv = charts[i].getAttribute('data-pv');
id = charts[i].getAttribute('id');
new Chart(
document.getElementById(id).getContext('2d'), {
type: 'line',
animation: true,
data: {
labels: JSON.parse(charts[i].getAttribute('data-pvd')),
datasets: [{
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: JSON.parse(pv),
}]
},
options: {plugins: {......},scales: {......}}
}
);
}
});