I'm currently facing a performance issue with my application that involves displaying a considerable number of charts on a single screen, using ng2-google-charts.
The core of the issue lies in the significant slowdown in interactions when multiple charts are rendered simultaneously. Specifically, I've noticed that mouse movements across the screen trigger what seems to be continuous calls to DoCheck for every chart, which becomes overwhelmingly inefficient with 15-20 charts reacting to every slight cursor movement. This is understandable for interactions directly over a chart, but the behavior persists even when the mouse moves outside the charts or over a single chart, affecting all charts on the page.
I understand the necessity of monitoring mouse events for interactive data visualization, but the current implementation's impact on performance is untenable. After spending over a week searching for solutions and consulting with AI, including ChatGPT 4, I've yet to find a way out of this predicament.
Has anyone else encountered this issue, and how did you resolve it? Any insights, advice, or suggestions would be immensely appreciated. I've also prepared a sandbox on StackBlitz to illustrate the problem more clearly and would be grateful for any feedback or ideas on how to improve the situation.
Thank you in advance for your time and help.
StackBlitz Link: https://stackblitz.com/edit/angular-googlecharts-rebent?file=src%2Fapp%2Fapp.component.ts
DoCheck is called too many times
I was hoping to display a large number of charts, around 20-30, on a single screen, where the DoCheck lifecycle hook in Angular for the parent component containing these charts would only be triggered when hovering over or interacting with a specific chart, rather than the current situation. In my current setup, whenever I make any small mouse movement, even if not directly over a chart, the DoCheck is called 20 times if there are 20 charts on the screen. It seems like all charts are listening for interactions even when I'm only interacting with one, leading to unnecessary performance overhead.