apexcharts / Blazor-ApexCharts

A blazor wrapper for ApexCharts.js
https://apexcharts.github.io/Blazor-ApexCharts
MIT License
784 stars 91 forks source link

Graphs are flickering on mobile. #405

Open armand200011 opened 6 months ago

armand200011 commented 6 months ago

I came across this issue in the project I am working on where the graphs are flickering and jumping around and is just not functioning. This only happens on mobile, but when I press F12 and go into developer tools on any PC to simulate a mobile screen size, everything works nicely, so I am not sure if it an issue related to screen size.

I have test on two different phone models and on both of them the issue occurred firstly on Xaomi Redmi Note 11 Pro and on a Samsung Galaxy A34.

This issue only occurs on the Chrome browser, it works perfectly on FireFox browser. I opened the online documentation for Blazor-ApexCharts and even the example charts that they have on their website are giving the same issues as I mentioned above.

Below are two videos capturing what I have experienced. The first link is a video from Chrome where the graphs are flickering and jumping around, and the second link is the video of that same page on FireFox where everything is working normally.

Chrome link: https://drive.google.com/file/d/1VdGMAr8S2fJ6ePGKy8JOxQx1FmIXFYSs/view?usp=sharing FireFox link: https://drive.google.com/file/d/1jDZ-02OH_Lb4IDh3aJl8bxVtpCSqMYB0/view?usp=sharing

jarodLesser commented 6 months ago

Found the same issue on the Huawei Mate 20 Pro. The graphs only used to bug out when I tried using a tooltip, but now it completely bugs out when loading and scrolling.

Lennert0d commented 6 months ago

I have noticed this as well. In my project that I am working on I have noticed it happening when ever I try to see a tooltip for a graph.

Zapnologica commented 6 months ago

I seem to be having this issue. Weirdly it only happens on certain phone screens.

My phone Samsung s24 doesn't do it, so I never noticed it, but one of our end users showed me the other day and I thought it was our code, but I now see thank to @armand200011 that it also does it on your guys demo site.

Please can you guys look into this and suggest a fix asap.

joadan commented 6 months ago

Hi,

Do you see the same behavior on the apexchart.js site https://apexcharts.com/javascript-chart-demos/

armand200011 commented 6 months ago

Hi, @joadan

I tested now again on the apexchart.js site on both chrome and fire fox browsers. The graphs were still getting duplicated sometimes and not functioning correctly on chrome, compared to fire fox browser where I opened that same page but everything functions properly.

Below were my findings when I opened the site on both browsers. Chrome link: https://drive.google.com/file/d/1MS1MBO0PP0hrlc-mtRukhqIBDwRzOssb/view?usp=sharing Fire Fox link: https://drive.google.com/file/d/1gPIAHEsQZKGYFkA5A3uUh1Ot_ccfY-0h/view?usp=sharing

joadan commented 6 months ago

Hello,

Please raise this issue in the apexcharts.js repo. I’m sorry for the inconvenience.

regards Joakim