Victory-native: x axis tick labels are centered with tick on Android, but start at tick on iOS

[Jaftem]

iOS:

Android:

Code:

<VictoryChart responsive={true} height={200} width={width} padding={{top: 3, left: 25, right: 15, bottom: 22}}>

// VictoryArea code here
// Y Axis code here 
// ....

      <VictoryAxis
         style={{ axis: { stroke: '#A4A4A4' },
         axisLabel: { fontSize: 8 },
         ticks: { stroke: '#A4A4A4' },
         tickLabels: { fontSize: 8, fill: '#999', padding: 0}}}
        />
</VictoryChart>

I don't think this is a surrounding container or padding issue in the VictoryChart tag because that shouldn't actually move the tick labels.

Is this the correct default behavior? Using 0.16.1

[robertobrogi]

Hi, I have the same problem.... in Android is perfect in Ios the label are wrong... you have find a solution?

[ghost]

The issue is that in IOS props of <VictoryLabel /> like textAnchor and verticalAnchor has no effect. It is quite a serious bug for me as I cant use charts with label located chaotically over the chart.

[robertobrogi]

uhm... if you use the version 0.15.0 work all fine...

[ghost]

I use victory-native": "0.16.6" and have a problem. Should I downgrade?
https://github.com/waubau/weather

[robertobrogi]

yes if you use the 0.15.0 work fine in ios

[ghost]

I confirm that 0.15.0 works but I have lost a quite nice barRatio option. But it is much lesser evil.
Also Y positioning of tick labels is slightly different between platforms but it also can be adjusted by dy option for Android.

[robertobrogi]

I hope in the new versione have this problem fix :)

[ibardash]

<VictoryTooltip /> is also affected:

[boygirl]

Please add a +1 if you can reproduce this issue in the Latest versions: [email protected], react-native-svg@^6.1.0.

[robertobrogi]

:( now i have [email protected] expo 25.0.0 in Ios the problem is the same....

is impossible to have align the Y axis

[boygirl]

@robertobrogi the version of react-native-svg will determine whether this can work properly. I know that expo-sdk is on an older version of react-native-svg. Current victory-native must use react-native-svg@^6.0.1-rc.1 or higher in order to align labels properly.

[boygirl]

I believe it's related to this issue: https://github.com/expo/expo/issues/1393