can anybody tell me why my chart.js chart is flickering? see this screencast video.

It looks slow in the video but it actually changes very fast. You will see in the console the height and width changes but I don't have any code in javascript that forces it to change.

And also it happens only sometimes depending on the size of the browser. Making the canvas small is just a temporary fix but it will still be reproducible when I resize the browser.

Any suggestions?

can anybody tell me why my chart.js chart is flickering? see this screencast video.

https://www.screencast.com/t/J8demDuX

It looks slow in the video but it actually changes very fast. You will see in the console the height and width changes but I don't have any code in javascript that forces it to change.

And also it happens only sometimes depending on the size of the browser. Making the canvas small is just a temporary fix but it will still be reproducible when I resize the browser.

Any suggestions?

• javascript
• chart.js

• it's probably line 37 in your code ... but that's just a shot in the dark – Jaromanda X Commented Jan 24, 2017 at 5:58

6 Answers 6

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;
}

Here is the github Issue page of the plugin bug. You will find different solutions & workaround that will work for you. https://github.com/chartjs/Chart.js/issues/11005