X-axis labels in react-native svg-charts not showing correctly

Question

I am having issues formatting my X-axis using react-native svg-charts. The top of the labels are being cut off and I am unsure if they are aligning correctly with the barchart elements. I have used content inset to try and align them manually and I am using the rotation style to make the labels fit better on screen (not overlapping).

The relevant code is below:

const verticalContentInset = { bottom: 5, top: 30 }
           <View style={{ flexDirection: 'column', flex: 1, width: '100%', paddingBottom: 5 }}>
            <View style={{ flexDirection: 'row', height: 300, padding: 20}}>
              <YAxis
                data={volumeData}
                style={{ marginBottom: 30 }}
                contentInset={verticalContentInset}
                svg={YaxesSvg}
                numberOfTicks={10}
                formatLabel={(value) => `${value}%`}
              />
              <BarChart style={{ flex: 1 }} data={newData} yAccessor={({item}) => item.y} contentInset={{ top: 30, bottom: 30 }}>
                <Grid />
              </BarChart>
            </View>
            <View style={{ height: 150 }}>
              <XAxis
                data={mineralName}
                style={{ height: 150}}
                contentInset={{ left: 20, right: 40}}
                scale={scale.scaleBand}
                svg={{ fontSize: 10, rotation: 40, fill: 'black', originY: 35 }}
                formatLabel={(value, index) => '----' + mineralName[index] }
              />
            </View>
          </View>

Screenshot of the code above when it is rendered:

As you can see some of the X-axis values are being cut off from the top and I have experimented with many values and cannot seem to find the sweet-spot where labels are rendering correctly. I would like to add more to the labels but firstly need the formatting to be fixed. The Y-axis is also hacked into place using content inset. Any help is greatly appreciated as I have trawled through the resources offered by the github repo and more. Thanks a mil!

Answer 1

I also suffered with this issue.

I added a y-transform to the svg props of the XAxis component and it sorted it for me.

<XAxis
  svg={{
      translateY: 5,
      ...
  }}
  ...
/>

Try adding that and see how you go.