How to have mutiple charts in a single page using Chart.js?

Question

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)*

score 0 · Answer 1 · answered Dec 23 '21 at 15:50

0

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),
        }]

answered Dec 23 '21 at 15:50

Riyaz Panarwala

163
2

score 0 · Answer 2 · answered Dec 24 '21 at 08:22

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: {......}}
        }
    );
}

});

How to have mutiple charts in a single page using Chart.js?

2 Answers2