CODEWITHSUNDEEP
javascriptchart.js
Voltaire John Secondes Biton
Voltaire John Secondes Biton

Reputation: 752

Chart.js flickering

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?

Upvotes: 4

Views: 10912

Answers (6)

Akashxolotl
Akashxolotl

Reputation: 566

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

Upvotes: 0

chriswehr
chriswehr

Reputation: 1

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

Upvotes: 0

evgeniya.osmakova
evgeniya.osmakova

Reputation: 430

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

Upvotes: 0

Jagadheesh Venkatesan
Jagadheesh Venkatesan

Reputation: 11

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

Upvotes: 1

Ashok Rao
Ashok Rao

Reputation: 49

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

Upvotes: 3

Jan
Jan

Reputation: 602

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

Upvotes: 16

Related Questions