Victory Native: Performance issue in graphs

[AliZaib-Emumba]

I am using a combination of victory bar and victory line charts where the data set varies depending on the filter selected. The chart is customized to work with a drag functionality where it shows data depending on the position/location of the drag. The performance when tested on android is always laggy while on iOS it lags depending on the data set. If the data set is has less than 10-12 items then it works perfectly fine but the performance decreases when the number of items are more than 12.

Victory version "victory-native": "36.4.1"

Smartphone :

• OS: iOS > 14, Android >=10

Screenshots

[mordechaim]

Can you show the code related to rendering the line on the touch position?

[AliZaib-Emumba]

@mordechaim You can see the sample implementation here: https://snack.expo.dev/@alizaib/tactless-cheese

[mordechaim]

For one, you can utilize the voronoi onActivate callback instead of calculating the closest point yourself.

Then, try making the active line the labelComponent of the voronoi container instead of adding it as a child of the chart

[AliZaib-Emumba]

@mordechaim Tried your recommended approach but still I found no change in the interactivity performance.

[mordechaim]

Here's the thing, by rendering the line as a child you force a render, while the label component won't render the entire chart again.

You need to utilize other react tactics to avoid renders, such as memoizing your component and not passing the active line as a prop (instead just let the label component handle it internally). You can read the active datum that's being passed to your custom label/line as a prop.

[maxoschepkov]

Same for me, even with simple pie chart without custom labels, on Android it's sooooo laggy. I'm wondering if your animations use native driver for android?

[fwielstra]

I found this issue because I was looking at the same issue - a simple bar chart with only a few dozen datapoints visible (also using the optimization guide found at https://formidable.com/open-source/victory/guides/zoom-on-large-datasets/), and found that disabling animations entirely solves the performance issue.

Is there a way to toggle animations on initial data or reload, but disable it afterwards? I can probably build a toggle myself with a timeout.

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.