React-native-svg-charts: X Axis labels overlapping

[ashcode1]

What is the problem?

X Axis labels overlap one another

When does it happen?

If X Axis labels are strings of several words, e.g "PayPal GBP Account" and formatLabel is:

formatLabel={value => value}

each label overlaps the next.

What platform?

• [x ] iOS
• [x ] Android

React Native version: 0.57.5
react-native-svg-charts-version: 5.2.0
react-native-svg version: 9.4.0

Code to reproduce

I first wondered if I could re-arrange the label into a column view so that each word would be on a new line. I split the string into an array of separate individual words and then set

flexDirection: 'column' 

on the XAxis style prop, but had no luck.

I also tried to split the string into an array of single word strings and map each word to a Text component:

formatLabel={value => {
              return value.split(' ').map((item, index) => {
                return (
                  <Text key={index}>
                    {item}
                  </Text>
                );
              });
            }}

and although this did successfully re-arrange the string into a column of single words, it also resulted in every single label being stacked below each other in one column on the left side of the chart.

I also tried to mapping the split string with line breaks but had no luck:

formatLabel={value => {
              return value.split(' ').map(item => {
                return `${item}\n`;
              });
            }}

I have looked at several examples in the docs but could not find any with these longer type strings for labels. I checked other similar issues such as #58 and #170 but they do not not seem to be the same.

I'd be really grateful for any help. Thanks very much for creating this library :)

iOS screenshots:

Android screenshots:

[AGIsmail]

As a temporary workaround, try rotating the text so that they are at an angle (using the "rotation" key-value pair).
E.g.,

svg={{
        fill: "grey",
    fontSize: 10,
    rotation: 20,
    originY: 30,
    y: 5
}}

[sunildate05]

@ashcode1 I'm also facing same issue.