I am using Chart.js to build a dynamic chart (the same canvas element shows data for 30 days, 7 days and 1 day depending on the value of a drop down.

I have the code working as far as redrawing the canvas. The new data appears on drop down change, but when I mouse over the chart the data flickers and I can see the previous version of the chart. I know I need to use the .clear() function to clear the data, but I'm not sure where this should happen. On var ctx before the function is executed? Or on window.myLine?

function redrawChart(data){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(data, {
        responsive: true
    });
}

I am using Chart.js to build a dynamic chart (the same canvas element shows data for 30 days, 7 days and 1 day depending on the value of a drop down.

I have the code working as far as redrawing the canvas. The new data appears on drop down change, but when I mouse over the chart the data flickers and I can see the previous version of the chart. I know I need to use the .clear() function to clear the data, but I'm not sure where this should happen. On var ctx before the function is executed? Or on window.myLine?

function redrawChart(data){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(data, {
        responsive: true
    });
}

• javascript
• jquery
• chart.js

• I have encountered the same problem and I tried to use .clear(), .destroy(), .remove(), none of those works. In the end I choose to use Google chart. – Xianlin Commented Aug 2, 2014 at 7:46
• I never found a solution either, but the "flickering" issue stopped when I disabled the hover effects on the points. I've been considering switching to Google Charts as well. – KRay Commented Aug 2, 2014 at 16:53
• Try my Solution , Hope it may be helpful, its working for me – Suganth G Commented Oct 28, 2014 at 13:46

3 Answers 3

Try this:

Before binding data , remove the canvas too ;)

HTML:

<div id="DivChartContainer"></div>

SCRIPT:

        $('#DivChartContainer').empty();
        $('#DivChartContainer').append('<canvas id="canvas"></canvas>');
        var ctx = document.getElementById("canvas").getContext("2d");
        var myLineChart = new Chart(ctx).Bar(barChartData, {
            responsive: true,
            barValueSpacing: 10,
            barStrokeWidth: 0,
            scaleShowLabels: true,
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
        });

Issue Solved !!

destroy() works fine for me, check this code.

 if (window.myDoughnut)
     window.myDoughnut.destroy();

 var ctx = $elm.getContext("2d");
 window.myDoughnut = new Chart(ctx).DoughnutAlt(value, {showScale: true, scaleShowLabels: true, animation: false});

I've had similar issues with .clear() and .destroy()

What worked for me:

pletely remove and replace the <canvas> element