wuba / wuba/react-native-echarts

Strange "shaking" behaviour for coordinateSystem + roundCap bar charts for higher than 100% percent values

Open
#124 1 comment 0 reactions 1 assignee View on GitHub

@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:

  1. Create a simple react-native-echarts skeleton bar chart
  2. Modify the series to include coordinateSystem: 'polar' and roundCap: true
  3. Include a data value in the series higher than the max value specified in angleAxis.max: 100 such as data: [140]
  4. Ensure animations are enabled
  5. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.