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 a line graph in the same canvas. I have tried these two ways to clear the canvas:
var grapharea = document.getElementById("barChart").getContext("2d");
grapharea.destroy();
var myNewChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });
second way:
var grapharea = document.getElementById("barChart").getContext("2d");
grapharea.clear();
var myNewChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });
Am I calling it right? OnButtonClick I call this function which uses the same canvas.
destroy() Use this to destroy any chart instances that are created. This will clean up any references stored to the chart object within Chart.
The correct method to use, 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.
To clear a chart from a canvas so that hover events cannot be triggered with Chart. js and JavaScript, we call destroy to destroy the chart. let myPieChart = null; //...
The correct method to use, 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.
var grapharea = document.getElementById("barChart").getContext("2d");
var myChart = new Chart(grapharea, { type: 'bar', data: barData, options: barOptions });
myChart.destroy();
myChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });
Straight from the docs (under Prototype Methods):
.destroy()
Use this to destroy any chart instances that are created. This will clean up any references stored to the chart object within Chart.js, along with any associated event listeners attached by Chart.js. This must be called before the canvas is reused for a new chart.
// Example from the docs
var myLineChart = new Chart(ctx, config);
// Destroys a specific chart instance
myLineChart.destroy();
It explicitly states that this method must be called before the canvas can be reused for a new chart.
.clear()
is also mentioned later in the same section as the function that "will clear the chart canvas. Used extensively internally between animation frames, but you might find it useful." The chart will be alive and well after calling this method, so this is not the method to call, if you want to reuse the canvas for a brand new chart.
To be honest, though, in cases like yours, I have often used a container div
to wrap my canvas
and, whenever I needed to create a new chart, I placed a new canvas
element in this div
. I then used this newly created canvas
for the new chart. If you ever come across strange behavior, possibly related to charts occupying the canvas before the current chart, have this approach in mind too.
Remove the canvas after every chart call, this worked for me
$("canvas#chartreport").remove();
$("div.chartreport").append('<canvas id="chartreport" class="animated fadeIn" height="150"></canvas>');
var ctx = document.getElementById("chartreport").getContext("2d");
chartreport= new Chart(ctx, { .... });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With