chartjs resizing very quickly (flickering) on mouseover

chart.js, jquery, twitter-bootstrap

Solution

You need to destroy the chart before you recreate it on the same canvas. So you can edit your redraw like so:

 //declare outside so it can be resued and checked
 var line_chart;

function redrawChart() {
    //if we already have a chart destroy it then carry on as normal
    if(line_chart)
    {
            line_chart.destroy();
    }
    var w = $("#chart_container").width();
    var c = document.getElementById("canvas");
    c.width = w;
    c.height = w/2;
    $("#chart_canvas").css("width", w);
    $("#chart_canvas").css("height", w/2);

    var chart_canvas = document.getElementById("canvas").getContext("2d");
    line_chart= new Chart(chart_canvas).Bar(barChartData);
};

here is a fiddle so you can actually re-size the run window to see it working http://fiddle.jshell.net/leighking2/4apqqjL0/

and a snippet it that's your fancy

var randomScalingFactor = function () {
    return Math.round(Math.random() * 100)
};

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }, {
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }, {
        fillColor: "rgba(15,18,20,0.5)",
        strokeColor: "rgba(15,18,20,0.8)",
        highlightFill: "rgba(15,18,20,0.75)",
        highlightStroke: "rgba(15,18,20,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }]

}


 var line_chart;

function redrawChart() {
    if(line_chart)
    {
            line_chart.destroy();
    }
    var w = $("#chart_container").width();
    var c = document.getElementById("canvas");
    c.width = w;
    c.height = w/2;
    $("#chart_canvas").css("width", w);
    $("#chart_canvas").css("height", w/2);

    var chart_canvas = document.getElementById("canvas").getContext("2d");
    line_chart= new Chart(chart_canvas).Bar(barChartData);
};

redrawChart();

var resizeTimer; 

$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(redrawChart, 250);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.js"></script>
<div id="chart_container"style="width: 50%">
    <canvas id="canvas" height="450" width="600"></canvas>
</div>

Problem

Original source