Error message in console from using chart.js

Question

function draw() {
    
    const labels = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
    ];

    const data = {
        labels: labels,
        datasets: [{
            label: 'test',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    };

    const config = {
        type: 'doughnut',
        data: data,
        options: {}
    };



    const myChart = new Chart(
        document.getElementById('myChart'),
        config
    );


}

This is my code and i keep getting this error message:

"Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID 'myChart' can be reused."

Apart from this error code, my chart is able to display perfectly with no problems.

In order to be able to draw another chart on the same canvas, is .destroy(). You must call it on the previously created chart object. You may also use the same variable for both charts. So before creating new chart you should destroy the canvas. Maybe calling this before making new chart will do the work myChart.destroy() — Extraterrestrial
– Extraterrestrial, Commented Aug 6, 2022 at 10:02
When i added myChart.destroy() before making new chart it displays another error message that states "Cannot access 'myChart' before initialization". But if i were to add myChart.destroy() at the end after i initialized 'myChart', my chart is gone and there isn't any error code for it. — Tan Jun Rong
– Tan Jun Rong, Commented Aug 6, 2022 at 10:14

Extraterrestrial · Accepted Answer · 2022-08-06 10:27:11Z

1

Call myChart.destroy() before creating the new Chart. First declare myChart it globally and then initialize it.

let myChart = null;
function draw() {
    
    const labels = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
    ];

    const data = {
        labels: labels,
        datasets: [{
            label: 'test',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    };

    const config = {
        type: 'doughnut',
        data: data,
        options: {}
    };

    if(myChart !== null){
        myChart.destroy();
    }

    myChart = new Chart(
        document.getElementById('myChart'),
        config
    );

}

answered Aug 6, 2022 at 10:27

Extraterrestrial

6121 gold badge6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tan Jun Rong Over a year ago

Hi this doesn't work for me. I tried it and now its just creating many instances over and over again. etc: ID:1 ID:2 .....

Collectives™ on Stack Overflow

Error message in console from using chart.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related