Rendering issue for Background color (Gradient and Opacity for solid color)

[dinorahto]

Expected behavior

We are expecting Charts (Line Charts) with a solid background color that doesn't blink when getting filled out by the color

Example of expected look inside our views (we were expecting a gradient, but we switch it to a solid color)

Current behavior

Using the next configuration for our dataSets:

const datasets = [ { label: 'Total', data: subtotalAmountData, fontColor: '#6B7280', pointBackgroundColor: '#1C64F2', pointBorderColor: '#1C64F2', fill: 'start', pointRadius: 3, backgroundColor: 'rgba(28, 100, 242, 0.5)', borderColor: 'rgba(28, 100, 242)', }, ];

We are seeing that our charts are looking with a little lag in the rendering, last for a second, and once the user scroll or clicks on it is gone

Reproducible sample

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENZwL5wGZQQhwDkAxhrAHQBWAziQNwCwAUGwG6ZxkwAecALxwAJhDIBXEAFMAdjCoBzaTACiAG2kz5AIQCeASREAKAEQg9aTDFMBKOOjpwAEgBUAsgBlk6WVzoaWnIwLKxcUHAWVljCstIA7iiUMMa8fAA0iGxwOXAwemDSAFyk6sBxJOnZuSLoMOglCNW5ueroAEbS6nQlANqmAErSIqaZpjrqEtKjcKYAml3qEPEzpgDiUNJyqwAKElBgmqsA8lC+yqYAulWsLS219XQqPXC9Tbd3n22d6iUkAMRwCB4OAANQgMGkDBun0+DwarwAjAAmTKIgCcmQAzJkAKyZVFwLHXZp3bCXUnYGG5CBgGDACCyF7vT50MjoTTM0ktPiNbl3fk5KmCuB6PkfWFwEXYfkyiU4NjYWyMIAa

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

^5.2.0

Browser name and version

react-chartjs-2

Link to your project

No response

[LeeLenaleee]

Chart.js does not have a version 5.2, current max version is 4.3.0.

But from your screenshots that looks like a rendering issue in chrome, seems verry similiar to another issue where it was like that. But it is hard to confirm without a reproducible sample

[RobinTail]

I'm experiencing the same issue with a gradient. I noticed that it happens in Chrome, but NOT in Safari.

Chart.js v3.9.1. Chrome v114.0.5735.106 (Official Build) (arm64) Safari v16.5 (18615.2.9.11.4)

Here are screenshots from Chrome:

[RobinTail]

Seems to be the duplicate of https://github.com/chartjs/Chart.js/issues/10727

[RobinTail]

It seems that the issue comes from the growing line animation. When its shape is rising from the bottom it may leave those gaps.

I can confirm that it's possible to resolve the issue by setting { animation: false } config option. However, it does not feel as cool as before. Consider it as a temporary solution.

[RobinTail]

Perhaps, there is a way to adjust the default animation to avoid that painting issue on Chrome. Please let me know if you tried something like that.

[RobinTail]

Good news.

Perhaps the issue can be resolved by changing the setting the animation.easing to easeInElastic (while keeping the standard 1000 of the duration).

However, the animation itself is a bit weird for charts :)

Here are the results of my experiment.

animation.easing	Outcome
easeOutQuart (default)
linear
easeOutQuint
easeOutCirc
easeInOutQuint
easeInOutElastic
easeInCirc
easeInQuad
easeInExpo
easeInElastic ✅

[comictvn]

I'm also facing the issue. is there any solution?

[etimberg]

@comictvn likely nothing that will work for everyone. This is likely a rendering problem inside the browser. I know that chrome used to switch between hardware and software rendering around a canvas size of 256x256px. Does the bug reproduce for you when the canvas is both small and large?

[comictvn]

@etimberg thank you! disabling animation is a temporary solution for now. the issue is happening even small and big size of canvas.

[Enes5519]

Turning off animations didn't work

[leovolving]

I know this won't work for everyone's use case, but I was able to fix it reliably at multiple screen sizes by removing the tension setting. I previously had tension: 0.1

I was also able to get it to work by setting maintainAspectRatio back to true, but that wasn't a good option for my use case because I have a fixed height.

[midthun]

Also seeing this issue in Chrome, turning off tension works, but I would like to be able to use smoother curves.

With tension:

Without tension:

Changing easing function or turning off animations did not work for me.

[unhyif]

In my case, it occurs when it is approximately 330px or more.

[Tonours]

Hello! We encountered the same issue in our project when using charts with both line curves and gradients. After some investigation, I discovered that disabling hardware acceleration in Chrome resolved the problem. Fortunately, the Canvas API provides a willReadFrequently option to enforce software acceleration, which effectively fixes the bug.

Here is an example comparing behavior with and without hardware acceleration.