labels and chart padding seem to be off

[laurens-lamberts]

Describe Your Environment

What version of victory-native-xl are you using? (can be found by running npm list --depth 0 victory-native)
"victory-native": "^41.16.0" (latest at time of writing)

What version of React and React Native are you using?
"react": "18.3.1",
"react-native": "0.76.5",

What version of Reanimated and React Native Skia are you using?
"react-native-reanimated": "~3.16.6"
"@shopify/react-native-skia": "1.10.1" (latest at time of writing)

Are you using Expo or React Native CLI?
"expo": "^52.0.21",

What platform are you on? (e.g., iOS, Android)
iOS

Describe the Problem

I try the get the BarGroup working properly, but it seems like the x-axis labels are misaligned.
They are not centered under the bar group.

To make sure it wasn't my specific chart implementation, I tested the victory-native bargroup example.
This shows a similar (less magnified) issue.

Additionally, you can see that there is a possibility for the bars to get out of bounds in the graph, by changing the bargroup paddings. I believe I can use domainPadding to fix this in certain scenarios, but I was expecting that not to be necessary (only using domainPadding for additional padding, if preferred).

Expected behavior: [What you expect to happen]

• X-axis labels being centered under the bargroup.
• Bar charts always in view

Actual behavior: [What actually happens]

• X-axis labels are too far to the right.
• Bar charts seem to get clipped at the left side of the chart, when bargroups are spaced (too much).

Additional Information

Please ask if any additional information would be helpful.

[laurens-lamberts]

Hi @zibs, glad to hear you found the issue!
Looking forward to the patch. Thanks for the swift solution.

All the best,
Laurens