I think my issue is a known one, everytime I make a new chart and hover my mouse over some points in the canvas, the old charts flash in and out all the time. Here's one of the threads<\/a> I followed to try and fix it, but nothing seems to work. I tried re-appending the canvas, using destroy, clear, if statements which should<\/em> clear it, but nothing.
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: chartjsDate,
datasets: [{
label: 'temp',
data: chartjsTemp,
backgroundColor: "rgba(240,240,240,0.5)"
}]
}
});
I also had this problem. To solve it, you first have to declare myChart
variable globally and then try this way.
//var my chart declare globally.
let chartData = {
type: 'line',
data: {
labels: chartjsDate,
datasets: [{
label: 'temp',
data: chartjsTemp,
backgroundColor: "rgba(240,240,240,0.5)"
}]
}
if (typeof(this.myChart) != "undefined") {
this.myChart.destroy();
}
const ctx = this.renderRoot.querySelector('#chart-canvas').getContext('2d');
this.myChart = new Chart(ctx, chartData);
this.myChart.update();
Solved! I added this above the javascript code:
var button = document.getElementById("submitButton");
submitButton.addEventListener("click", function(){
myChart.destroy();
});
And changed my submit button to have the id "submitButton", like this:
<input type="submit" class="btn btn-danger" id="submitButton" value="Send" />
This way, everytime you press the submit button, it destroys the previous chart. The weird thing is that when trying to use myChart.destroy();
I got errors.
Above solutions are working for me but when I have two charts on the same page, Only one is showing. Other charts are becoming empty. Here is the solution for that.
var ctx = document.getElementById("bar-chart").getContext("2d");
//Destroy the previous chart;
//Rename the "bar" according to your component
if(window.bar != undefined)
window.bar.destroy();
window.bar = new Chart(ctx , {});
if you don't change the "bar", only one chart will show in your page.
var ctxLine = document.getElementById("line-chart").getContext("2d");
//var myLineChart;
//myLineChart;
if(window.bar != undefined)
window.bar.destroy();
window.bar = new Chart(ctxLine, {});
For more clear check this: solved-hovering-chartjs-bar-chart-showing-old-data
It is not bug. Basically you were creating a new graph each time. What you need here is to update graph instead of drawing a new one on that canvas. This can be done using the following code.
if(typeof Graph ==="undefined"){
window.Graph = new Chart(Graph_ctx, Graph_config);
}else{
//updating with new chart data
window.Graph.config=Graph_config;
//redraw the chart
window.Graph.update();
}
I usually do this before creating my chart
document.querySelector(".chart-container").innerHTML= '<canvas id="bar_chart"></canvas>';
var chart3 = $('#bar_chart');
graph = new Chart(chart3, {
type: 'bar',
data: chart_data,
options: options
});
My html:
<div class="chart-container">
<canvas id="bar_chart"></canvas>0
</div>
Just Use That and solve your Problem ;
if(window.myChart!=undefined) {
var oldcanvasid= window.myChart.chart.ctx.canvas.id;
if(chardcanvasid==oldcanvasid) {
window.myChart.destroy();
}
}
var ctx = document.getElementById(chardcanvasid).getContext('2d');
window.myChart = new Chart(ctx, {
type: charttype,
data: datass,
options: optionss,
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.