Performance Issues with Large Amounts of Data

[MonliH]

Thanks for the awesome library! It's incredibly easy to use and looks great! However, the drag to scroll functionality is very sluggish with large (e.g., 4k+) amounts of data. Is there a way to speed this up somehow?

If the chart gets redrawn every time the cart is scrolled, then I'd see why there's this performance problem. I'm not sure how it's implemented internally, but it could be wise to draw, say the entire chart, then wrap things in a scrollview.

Here is a video showing the slow performance on an iPhone 7:

https://user-images.githubusercontent.com/30177086/130495944-aa54438f-219d-4894-8238-b46a5f80c29e.mov

I am scrolling horizontally continuously, but the changes are taking at least a second to register. The initial load also takes a noticable amount of time.

[bekir-arkulpa]

Also having the same problem . with large amount of data chart becomes laggy while scrolling, is there not a possibility to render the chart once completly and wrap it in a scrollview ? If someone got it to work would appreciate an answer , because i love this libraries customizability , we customized everything and even made it zoomable with setViewport origin function and zooming right in the middle of both x axis points with Offset prop with customized Chart component and only this performance issue is worrying us.

[MonliH]

For other people with the same issue, we decided to switch to react-native-svg-charts, wrapped in a ScrollView.

It works perfectly, and the performance is much better (completely smooth scrolling). The poor performance is seriously a deal breaker here.

[wibimaster]

I got a 1 second lag' with 31 entries...

@MonliH Can you share (privately ?) a tutorial for your smooth solution ?

[bekir-arkulpa]

we switched to victory native, they have a extra section for performance called zoom in large data sets in docs. Zoom behaviour sucks with pinch to zoom with fingers but we switched it with + - buttons to zoom and it works pretty well