wuba / wuba/react-native-echarts
Strange "shaking" behaviour for coordinateSystem + roundCap bar charts for higher than 100% percent values
@yechunxi is already working on this.
Since Oct 27, 2023.
- Dominant language
- TypeScript
- Stars
- 967
- Forks
- 35
- PR merge metrics
- No merged PRs in 30d
Description
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'androundCap: true - Include a data value in the series higher than the max value specified in
angleAxis.max: 100such asdata: [140] - Ensure animations are enabled
- Load the graph
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):
-
Device: iPhone 12 Pro Max
-
OS: iOS 16.6
-
Browser: Safari
-
Versions:
"@wuba/react-native-echarts": "^1.2.4",
"echarts": "^5.4.3", -
Device: Android Emulator (Pixel 5 API 30)
-
OS: Android 11.0 Google APIs
-
Browser N/A
-
Versions:
"@wuba/react-native-echarts": "^1.2.4",
"echarts": "^5.4.3",
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.