Destroy chart.js bar graph to redraw other graph in same

Question

I am using the Chart.js library to draw a bar graph, it is working fine, but now I want to destroy the bar graph and make

Answer 1

Simple edit for 2020:

This worked for me. Change the chart to global by making it window owned (Change the declaration from var myChart to window myChart)

Check whether the chart variable is already initialized as Chart, if so, destroy it and create a new one, even you can create another one on the same name. Below is the code:

if(window.myChart instanceof Chart)
{
    window.myChart.destroy();
}
var ctx = document.getElementById('myChart').getContext("2d");

Hope it works!

Answer 2

In order to solve this problem I have used jQuery's add() and remove() methods, to clear the canvas. I am removing the component and before drawing it again I am appending the canvas again with the same id using jQuery's append() method.

redraw(){

 $("#myChart").remove();// removing previous canvas element
 //change the data values or add new values for new graph
 $("#chart_box").after("<canvas id='myChart'></canvas>");
 // again adding a new canvas element with same id
 generateGraph();// calling the main graph generating function 

}

Answer 3

I'm using Chart.js 2.7.2 as of right now. In my app, I'm creating multiple charts and needed a way to access them to properly "replace" their data and fix the "old chart" showing on hover. None of the answers I've tried worked right.

Here's a way to manage this with one or multiple charts:

Store charts in global

var charts=[]; // global

Function to create charts

function createChart(id, type, labels, data)
{
    // for multiple datasets
    var datasets=[];
    data.forEach(function(set) {
        datasets.push({
            label: set.label,
            data: set.data
        });
    });  

    var config = {
        type: type,
        data: {
            labels: labels,
            datasets: datasets
        }
    };

    if(typeof charts[id] == "undefined") // see if passed id exists
    {   
        // doesn't, so create it
        charts[id]= new (function(){
            this.ctx=$(id); // canvas el
            this.chart=new Chart(this.ctx, config);
        })();     
        console.log('created chart '+charts[id].chart.canvas.id);     
    }
    else
    {
        charts[id].chart.destroy(); // "destroy" the "old chart"
        charts[id].chart=new Chart(charts[id].ctx, config); // create the chart with same id and el
        console.log('replaced chart '+charts[id].chart.canvas.id);        
    }
    // just to see all instances
    Chart.helpers.each(Chart.instances, function(instance){
        console.log('found instance '+instance.chart.canvas.id)
    })

}

For each of your canvas elements like:

<canvas id="thiscanvasid"></canvas>

Use the function to create/replace the chart

createChart('#thiscanvasid', 'bar', json.labels, json.datasets);

Answer 4

Create a global object:

window['chart-' + chartId] = new Chart(...);

Access and destroy to procced with redraw:

if ( window['chart-' + chartId] != undefined ) {
    window['chart-' + chartId].destroy();
}

Answer 5

This will resolve the issue where your chart becomes slower while updating it several times on multiple ajax calls:

Just add this code before initiating your chart:

    $('.chartjs-size-monitor').each(function(){
      $(this).remove();
    })
    var grapharea = document.getElementById("barChart").getContext("2d");

Answer 6

I always use only 1 graph/page. Destroy() solved the issues.

 if (
        window.myLine !== undefined
        &&
        window.myLine !== null
    ) {
        window.myLine.destroy();
    }

    window.myLine = new Chart(graphCanvasCtx, config);