[Chartjs]-Chartjs resizing very quickly (flickering) on mouseover

by

12👍

✅

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>

2👍

You need to destroy the chart previous data. Bellow example for Ajax request. if you use destroy you should be use canvas height and width otherwise it your graph size going to reduce in every response.

$("#search_date").on('change', function(){
 if(window.myBar!=null){
     window.myBar.destroy();
   }
  var date = $(this).val();
   $.ajax({
     url: "test/test",
     type: "post",
     data: {
       searchDate:date
     },
     dataType:'json',
     success: function(response){

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

       var barChartData = {

         labels : response.namedata,
         datasets : [
           {
             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 :  response.countdata
           }
         ]

       }

       var ctx = document.getElementById("canvas").getContext("2d");
       ctx.canvas.width = 200;
       ctx.canvas.height = 200;
       window.myBar = new Chart(ctx).Bar(barChartData, {
         responsive : true
       });

     }

   })
 })

0👍

Add the following styles to the parent element of the canvas:

-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

Leave a comment