I am trying to build a web page that has a video and 2 graphs. When I am trying to show 2 graphs I get the following message: " Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.." I don't understand why I need to destroy the canvass if I am using different canvasses for different graphs on the same page. My code is:

<div class='FisrtChat'>
    <canvas id="chart" width="300" height="50"></canvas>
</div>
<div class='SecondChart'>
    <canvas id="chart_Multi" width="300" height="50"></canvas>
</div>
<script src="final_graph.js"></script>
<script src="final_graph.js"></script>

my final_grapg.js file containes:

async function chartIt() {
const data = await getData();
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: data.xs,
        datasets: [{
            label: 'Finall Q_value throw time',
            data: data.ys,
            backgroundColor: ['rgba(255, 99, 132, 0.2)', ],
            borderColor: ['rgba(255, 99, 132, 1)', ],
            borderWidth: 1
        }]
    },
});

} my multi_head.js file contains:

async function chartIt() {
const data = await getData();
const ctx = document.getElementById('chart_MULTI').getContext('2d');
const myChart_H1 = new Chart(ctx, {
    datasets: [{
        label: 'Head 1',
        data: data.ys1,
        borderColor: 'red'
    }]
   },
});

Thank you in advance, Yael

I am trying to build a web page that has a video and 2 graphs. When I am trying to show 2 graphs I get the following message: " Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.." I don't understand why I need to destroy the canvass if I am using different canvasses for different graphs on the same page. My code is:

<div class='FisrtChat'>
    <canvas id="chart" width="300" height="50"></canvas>
</div>
<div class='SecondChart'>
    <canvas id="chart_Multi" width="300" height="50"></canvas>
</div>
<script src="final_graph.js"></script>
<script src="final_graph.js"></script>

my final_grapg.js file containes:

async function chartIt() {
const data = await getData();
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: data.xs,
        datasets: [{
            label: 'Finall Q_value throw time',
            data: data.ys,
            backgroundColor: ['rgba(255, 99, 132, 0.2)', ],
            borderColor: ['rgba(255, 99, 132, 1)', ],
            borderWidth: 1
        }]
    },
});

} my multi_head.js file contains:

async function chartIt() {
const data = await getData();
const ctx = document.getElementById('chart_MULTI').getContext('2d');
const myChart_H1 = new Chart(ctx, {
    datasets: [{
        label: 'Head 1',
        data: data.ys1,
        borderColor: 'red'
    }]
   },
});

Thank you in advance, Yael

• javascript
• chart.js

• Did you check if the code is running twice, because if thats the case it tries to initialize the same chart twice – LeeLenalee Commented Oct 13, 2021 at 17:27

1 Answer 1

You have to add the following block of code if your chart is getting created more than once.

let chartStatus = Chart.getChart("chart_MULTI");
if (chartStatus != undefined) {
    chartStatus.destroy();
}   

Full code - (you can do the same for another chart)

async function chartIt() {
const data = await getData();
const ctx = document.getElementById('chart_MULTI').getContext('2d');
let chartStatus = Chart.getChart("chart_MULTI");
if (chartStatus != undefined) {
    chartStatus.destroy();
}
const myChart_H1 = new Chart(ctx, {
    datasets: [{
        label: 'Head 1',
        data: data.ys1,
        borderColor: 'red'
    }]
   },
});