Victory-Axis render outside the visible area

[IgnacioMadariaga]

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:

        <View style={styles.chartContainer}>

            <VictoryChart
                theme={VictoryTheme.grayscale}
                padding={28}
                domain={{y: [domainValues[0] * 0.9, domainValues[1] === 0 ? 100 : domainValues[1] * 1.1]}}
                containerComponent={
                <VictoryCursorContainer
                    cursorDimension="x"
                    onCursorChange={(value) => handleChange(value)}
                    cursorLabel={() => 'pointerActive'}
                    cursorLabelComponent={<CustomCursorLabel/>}
                    cursorComponent={pointerActive ? <LineSegment style={{stroke: 'white'}}/> : <LineSegment style={{stroke: 'none'}}/>}
                />}
                animate
            >
                <Defs>
                    <LinearGradient id="gradientStroke" x1='0%' y1='0%' x2='0%' y2='100%'>
                        <Stop offset="0%" stopColor='#ccb88d' stopOpacity='0.6'/>
                        <Stop offset="25%" stopColor='#ccb88d' stopOpacity='0.5'/>
                        <Stop offset="50%" stopColor='#ccb88d'stopOpacity='0.4'/>
                        <Stop offset="75%" stopColor='#ccb88d' stopOpacity='0.3'/>
                        <Stop offset="100%" stopColor='#ccb88d' stopOpacity='0.2'/>
                    </LinearGradient>
                </Defs>
                <VictoryAxis
                    dependentAxis
                    style={{
                        tickLabels: {fontSize: 10, padding: 0, fill: '#fff', fontFamily: 'JetBrainsMono_500Medium'}, 
                        axis: { stroke: 'none' }
                    }}
                    tickCount={3}
                    tickFormat={(y: number) => formatY(y)}
                />
                <VictoryAxis
                    tickFormat={(x: Date) => moment(x).format(formatMoment)}
                    tickCount={3}
                    style={{
                        tickLabels: {fontSize: 10, padding: 10, fill: '#fff', fontFamily: 'JetBrainsMono_500Medium'},
                        axis: { stroke: 'none' },
                    }}
                />
                <VictoryArea
                    data={data}
                    style={{ 
                        data: { fill: 'url(#gradientStroke)',
                                stroke: 'rgba(204, 184, 141, 1)',
                                strokeWidth: 3 },
                      }}
                    x="date"
                    y='value'
                    interpolation={'natural'}
                />
            </VictoryChart>
        </View>

• Device: Xiaomi Redmi Note 8

[craigbehnke]

I was running into a similar issue (tick labels were being rendered offscreen) and found a solution that, while it does not solve the underlying problem, does treat the symptom.

I added additional padding to the VictoryChart component that increased the area available for display. So in your code, you could increase the VictoryChart padding from 28 up to 50, for example.

While it doesn't address the problem, it does make it so that all text is legible. To the maintainers: if we could get a code change that ensures that all chart elements are 100% visible within the viewport, though, that would be wonderful! We shouldn't have to be doing math on our own to figure out how to render a graph!

[IgnacioMadariaga]

@craigbehnke I already find one solution, you can set the padding prop with dif values for bot, top, left and right, and updates the right value allowing to see the lables.

Example:

padding: {{ top: 0, bottom: 20, left: 20, right: 20 }}