[Chartjs]-Chart.js flickering

I had a similar problem with my chart. I discovered it happend when recreating the chart on the same canvas.

If you recreate your chart multiple times on the same canvas, try calling the

    .destroy();  

function on your chart before recreating it.

Hope this helps

I had a similar problem with my chart. I discovered it was happens when we don’t set responsive to false. Please make sure to set it explicitly

In Options responsive: false

Its the issue with ChartJs version. Had this till on 2.7.0, Its resolved in latest version, its not flickering anymore.

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js

For me the solution was to wrap a component into React.memo

I had a similar problem with version 3.8.0. None of the other answers worked for me, but the solution was quite easy. I had a typing error in my css code.

If maintainAspectRatio is set to false, the height and width of the canvas element has to be correctly defined in the stylesheet.

The canvas element may try to get the height and width of the parent container, if the parent container doesn’t have these properties (correctly) set, it trys to get these properties from the container the layer above and so on. And if there are no values available, the canvas starts to flicker.

Try to wrap the canvas in a div container and set the properties corrrectly, the canvas should stop flickering.

For Example:

<div id="canvasWrapper">
   <canvas id="canvasExample"></canvas>
</div>

#canvasWrapper{
   width: 100%;
   height: 40vh;
}