-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rendering issue for Background color (Gradient and Opacity for solid color) #11310
Comments
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 |
Seems to be the duplicate of #10727 |
It seems that the issue comes from the growing line animation. I can confirm that it's possible to resolve the issue by setting |
Perhaps, there is a way to adjust the default animation to avoid that painting issue on Chrome. |
I'm also facing the issue. is there any solution? |
@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? |
@etimberg thank you! disabling animation is a temporary solution for now. the issue is happening even small and big size of canvas. |
Turning off animations didn't work |
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 I was also able to get it to work by setting |
In my case, it occurs when it is approximately 330px or more. |
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)
![Screenshot 2023-05-25 at 12 53 31 p m](https://private-user-images.githubusercontent.com/47044385/240983178-1cb3652f-3b0c-436a-929f-3d38ffb7b60e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI2MDAzMzMsIm5iZiI6MTcyMjYwMDAzMywicGF0aCI6Ii80NzA0NDM4NS8yNDA5ODMxNzgtMWNiMzY1MmYtM2IwYy00MzZhLTkyOWYtM2QzOGZmYjdiNjBlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODAyVDEyMDAzM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI2MzM3ZmIzYzAzMTE2YjgwZWVmYzcyZjU1ZDUwZWQ3OWUwNDY5ZWM5M2NmZjc4ZTQ1NGJhMzBhOGY1MjQ1ZDkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.mX468QI1yZlq0mFi9gPfZqPSMxV4mZ5GxtEBSEs4kY4)
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
The text was updated successfully, but these errors were encountered: