FormidableLabs / FormidableLabs/victory
Victory-Axis render outside the visible area
- Dominant language
- TypeScript
- Stars
- 11.2k
- Forks
- 536
- PR merge metrics
- No merged PRs in 30d
Description
Hello! I'm using your library to make a Graph of a portfolio in React Native, it's amazing, thank you! But I have some issues, I searched in this forum, in StackoverFlow and in the code examples of this repo and I didn't find solution: so I decided to make an issue
I'm trying to render an Area Chart with x=date and y=number date types. I'm using VictoryAxis to render the axis, but in some case, the x axis values are rendered outside the visible area in my device (see the image bellow). Exists any way to force the app to render inside the visible area of the chart?
I'm using npm version 9.4.2 and "victory-native": "^36.6.8"
My code is something like this:
```
handleChange(value)}
cursorLabel={() => 'pointerActive'}
cursorLabelComponent={}
cursorComponent={pointerActive ? : }
/>}
animate
>
formatY(y)}
/>
moment(x).format(formatMoment)}
tickCount={3}
style={{
tickLabels: {fontSize: 10, padding: 10, fill: '#fff', fontFamily: 'JetBrainsMono_500Medium'},
axis: { stroke: 'none' },
}}
/>
```

- Device: Xiaomi Redmi Note 8
Contributor guide
Research direction
Reproduce the supplied VictoryChart, VictoryAxis, and VictoryArea example in React Native on the reported device or a comparable viewport, then inspect how the axis padding and tickLabels are rendered. Done means the x-axis labels remain within the chart's visible area while preserving the reported date-axis formatting.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- data-visualization, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100