FormidableLabs / FormidableLabs/victory

Victory-Axis render outside the visible area

Open
#2,561 2 comments 1 reaction 0 assignees View on GitHub
Issue: Accepted Type: Enhancement :pencil2:
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' },
}}
/>



```

![image](https://user-images.githubusercontent.com/112983971/218859717-c605d59c-192a-442e-8c97-ec9022470b60.png)

- Device: Xiaomi Redmi Note 8

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.