FormidableLabs / FormidableLabs/victory

Custom component for `axisLabelComponent` in combination with `animate` causes render bug

Open
#2,481 0 comments 0 reactions 0 assignees View on GitHub
Issue: Accepted Type: Bug :bug:
Dominant language
TypeScript
Stars
11.2k
Forks
536
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**
Setting a custom label component for the property `axisLabelComponent` for the `VictoryPolarAxis` component, in combination with enabling `animate` causes the custom label component to be rendered outside the chart.

**Victory version**
```
"victory-chart": "^36.6.8",
"victory-core": "^36.6.8",
"victory-native": "^36.6.8",
```

**Code Sandbox link**
https://github.com/aike19115/victory-native-example-custom-axis-label

**To Reproduce**
- Clone the above GitHub repo
- Run `yarn install`
- Run `yarn ios`

**Expected behavior**
That the labels renders in a correct position just like when `animate={false}`.

**Screenshots**
In the screenshot the above chart is with `animate={false}`, the below chart is with `animate={true}`:
![Simulator Screen Shot - iPhone 13 mini - 2022-09-27 at 16 55 56](https://user-images.githubusercontent.com/17004429/192562636-4d4789bd-7bdf-4582-abd9-0ef58ced4c76.png)

**Smartphone (please complete the following information):**
iOS Simulator, iPhone 13 mini, iOS 16.0

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.