imaNNeo / fl_chart

FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
https://flchart.dev
MIT License
6.77k stars 1.74k forks source link

Best way to synchronize and show tool tips of an X value across multiple charts #1641

Closed lamarios closed 5 months ago

lamarios commented 5 months ago

Hi, Thanks for the great library !

I was wondering if you have a suggestion on what is the best way to synchronize and programmatically touch the same X value across multiple charts,

I'm able to do it but the performance degrades quickly the more graphs and lines there are on slower hardware (especially web).

Here's a video of what i already implemented: Screencast from 2024-04-26 16-20-59.webm

You can see that there is already some delay in the video and I have a fairly recent machine.

Currently what I do is I have a Cubit (using bloc library) that holds the X value that is being hovered and a builder around each graph that rebuilds when that X value changes. I programmatically select all the touched spots and display the tooltips and draw the vertical line on each graph.

I believe the issue is that all the graphs are rebuilt every time the X date changes, I implemented a throttle and debounce so that it doesn't rebuild for each pixel the mouse moves but it is still slow on some lower end machines.

Do you know if there is a better approach of handling this ?

lamarios commented 5 months ago

I managed to solve it if anyone is interested but it's a pretty hacky way:

I built my own tool tip layer on top of the graph. So each graph is now in a stack with a transparent container on top that handle the touch events and will draw it's own tool tips which mean that when the highlighted date changes the graph doesn't actually rebuid and only the top layer does. I also disabled the tool tips altogether on the graph itself.

Video: Screencast from 2024-04-29 13-28-52.webm