📈 React Native ECharts Library: An awesome charting library for React Native, built upon Apache ECharts and leveraging react-native-svg and react-native-skia. Offers significantly better performance compared to WebView-based solutions.
Describe the bug
When creating a polar coordinateSystem bar chart with roundCap set to true for a value on the series, that dataset will appear to shake during animation.
To Reproduce
Steps to reproduce the behavior:
Create a simple react-native-echarts skeleton bar chart
Modify the series to include coordinateSystem: 'polar' and roundCap: true
Include a data value in the series higher than the max value specified in angleAxis.max: 100 such as data: [140]
Ensure animations are enabled
Load the graph
Expected behavior
The animation reaches it's final destination without causing the element to shake.
Additional context
This appears to occur across iOS/Android/Web on both Skia and SVG. But does not seem to happen on the non react-native library. If there are any suggestions/alternatives methods for a better way to create this style of graph that can replicate the second snack that would be fantastic.
davidtjones02
commented
1 year ago
Describe the bug When creating a polar coordinateSystem bar chart with roundCap set to true for a value on the series, that dataset will appear to shake during animation.
To Reproduce Steps to reproduce the behavior:
coordinateSystem: 'polar'androundCap: trueangleAxis.max: 100such asdata: [140]Expected behavior The animation reaches it's final destination without causing the element to shake.
Screenshots/Videos iOS
https://github.com/wuba/react-native-echarts/assets/54673427/5900b584-04f4-4117-807e-9f9ff272ef3f
Android
https://github.com/wuba/react-native-echarts/assets/54673427/e6a78ab5-73c4-4c49-9308-03bea088361e
Smartphone (please complete the following information):
Additional context This appears to occur across iOS/Android/Web on both Skia and SVG. But does not seem to happen on the non react-native library. If there are any suggestions/alternatives methods for a better way to create this style of graph that can replicate the second snack that would be fantastic.
Expo Snacks: (animationDuration can be changed but the issue still occurs) https://snack.expo.dev/@davidtjones/6ffc24 https://snack.expo.dev/@davidtjones/close-to-production-example
Apache ECharts Example (Not experiencing the problem here): Apache ECharts example
Thank you very much for working on this library, it works incredibly well. If I can provide any more information I'll be happy to help.