margelo / react-native-graph

📈 Beautiful, high-performance Graphs and Charts for React Native built with Skia
https://margelo.io
MIT License
2.08k stars 118 forks source link

Fix: animate graph on data changes #111

Open msalcala11 opened 3 months ago

msalcala11 commented 3 months ago

Running the example project and clicking the "Refresh" button under the graph to change the graph's data does not result in the graph animating from the initial data to the new data for me. This 1-line change gets animations on data changes working as expected.

ArtKullashi commented 2 months ago

Can confirm this somewhat fixes the issue. The path of the graph still refuses to interpolate between some data changes. Eg. between two data sets that mirror each other. I think that this could be a skia limitation however

msalcala11 commented 2 months ago

@ArtKullashi Thanks for testing. Yes, I've noticed interpolations can fail between certain data changes if there are more than 45 data points (and the reliability of interpolation seems to decrease as the number of data points increases). The solution that has worked for me has been to scale graph data down to 45 data points

Pahkoo commented 2 months ago

When the point data is changed at {animated: true}, will the chart have a dynamic change effect? I am a static change here, no animation effect.

msalcala11 commented 2 months ago

When the point data is changed at {animated: true}, will the chart have a dynamic change effect? I am a static change here, no animation effect.

@Pahkoo Yes, in my testing, this PR should cause the chart to animate on point data changes when the animated prop is set to true so long as the point data arrays are of equal length and do not exceed 45 data points. Is it possible that your data arrays contain more than 45 data points or are not of equal length?

csmartinsfct commented 1 month ago

@msalcala11 FYI with that fix I can animate between more than 45 data points, as long as the dataset size matches.

As far as supporting animation between data sets of different sizes, see: https://shopify.github.io/react-native-skia/docs/animations/hooks/#usepathinterpolation

To interpolate two completely different paths, we found the flubber library to work well with Skia
msalcala11 commented 3 days ago

@csmartinsfct Thanks for sharing those Skia docs - will need to try the flubber library. I've been able to animate between more than 45 data points for some datasets as well. However, I've noticed that, as the number of data points increases, the likelihood of animations failing for some data changes also increases. I've found that 45 data points is the maximum amount of data points I can use to ensure that 100% of animations succeed.