2

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: barchart with badly formatted axis'

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!

Brendan McMahon
  • 86
  • 1
  • 9

1 Answers1

2

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.

G.Hunt
  • 1,364
  • 10
  • 20
  • 2
    I did not see this reply until quite late on, I will refer to it in my next exploration of these charts. Thank you for your answer. – Brendan McMahon Apr 02 '21 at 11:24
  • 1
    Hi! I have a similar problem and this solution seems to just move the labels down and cut them from the bottom instead of the top. Is there a way to increase the actual display width of the x-axis labels? – talismanbrandi Jul 28 '21 at 14:08