Chart.js: Clear canvas after drawing a chart (AJAX Request)

[RobMue]

Currently I am trying to draw a new chart after a POST request, which transfers the JSON to the "canvas" element. Unfortunately the graph starts jumping around and gets "fuzzy" between the grid lines.
This happens every time when the JSON data has changing datasets - which means, that there are different amounts of grid lines zu draw.

So far I have tried

ctx.clearRect(0, 0, canvas.width, canvas.height);

and

myLineChart = new Chart(ctx).Line(jsonData, {
    responsive: true,
    bezierCurveTension : 0.3
});
window.myLine = myLineChart;
//... chart is drawn

// before drawing a new chart
myLine.clear();

Both without success. Do you have any tipps/hints to destroy the canvas before redrawing on it?

[nnnick]

You can destroy the whole chart instance by calling .destroy on the instance.

Should sort your issues there?

[RobMue]

Awesome. :+1:
Thank you!

[kiga01]

how and where can i call the destroy instance?

[nnnick]

As per the example above, you'd call myLine.destroy()

[hezhijun]

Awesome. :+1: +1
Thanks!

[waniel]

How would one access any chart instances, say from outside of the invocation scope of the chart?

I can target any canvas elements, but I can't see any reference to the chart instance

[asadnauman]

Hi Waniel,

create a global variable and use that variable while creating chart. e-g

var mychart;
function drawChart() {
var ctx = document.getElementById("age-wise-chart-line").getContext("2d");
mychart= new Chart(ctx).Line(lineData, lineOptions);
}

Now you can use mychart.clear() or mychart.destroy()

Regards,
Asad

[rohandalvi]

What if I have multiple bar charts, I cannot use a single global variable for all.

[lobobobo]

i am using chart.js with ionic, when i show and hide the graph the graph shows for the first time but when i hide it and shows again the graph disappears....
Please guide me !

[thethakuri]

Thanks ! Chart flickered when I update with ajax call. Now its fine !

[ekatherina]

I have the same problem. I can't access myLineChart variable because it is created inside separate method. But I just want to clear canvas and for me it doesn't matter what kind of chart was drawn.
I can't belive that there is no any suitable method in chart.js just to reset canvas. Is there?

[lproenzav]

create a global variable and use that variable while creating chart. e-g

var mychart;
function drawChart() {
var ctx = document.getElementById("age-wise-chart-line").getContext("2d");
mychart= new Chart(ctx).Line(lineData, lineOptions);
}
Now you can use mychart.clear() or mychart.destroy()

I've done that but I get an error:
TypeError: myNewChart.destroy is not a function
myNewChart.destroy();

I can do ?. Thank you

[rohandalvi]

declare a global hash and save each chart object in that hash by the div identifier. Much simpler and scalable.

[raknjak]

if (typeof myNewChart != 'undefined') {
     myNewChart.destroy();
}

made the example above work for me.

[bhavi289]

lineChart1: any;  //declare 
plotGraph(data:any, label:any .....){
        if(this.lineChart1){
               console.log("destroying",this.lineChart1);
               this.lineChart1.destroy();
         }

         this.lineChart1 = new Chart(this.lineCanvas.nativeElement, {
                // plotting graph
         });
}

Adding the if condition will remove all previous data in graph and will plot the graph with new values