CODEWITHSUNDEEP
react-nativecharts
Pratap Penmetsa
Pratap Penmetsa

Reputation: 1237

X-axis labels overlaps in react-native svg-charts

I am using react-native-svg-charts to show pie charts and bar charts in react-native, in bar charts, X-axis labels overlap or doesn't display.

lables in X-axis overlaps as shown in image

how can render text content in X-axis in bar charts

this is my code

<XAxis
  style={{flex:1,height: windowSize.width/1.875, paddingTop:10 }}
  data={data2}
  formatLabel={value => {
   return data2.map(item => {
      return `${item}\n`;
          });
        }}
   contentInset={{ left: 30, right: 30 }}
   svg={{ fontSize: 10, fill: '#3A8F98' }}
   />

Upvotes: 1

Views: 7356

Answers (2)

Pratap Penmetsa
Pratap Penmetsa

Reputation: 1237

<XAxis
   style={{ paddingTop: 10,backgroundColor:'red' }}
   data={data}
   formatLabel={(value, index) => this.state.data2[index]}
   contentInset={{ left: 18, right: 18 }}
   svg={{ fontSize: windowSize.width/55, fill: '#3A8F98' }}/>

changed the formatLabel from 

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

to

formatLabel={(value, index) => this.state.data2[index]}

Upvotes: 3

remeus
remeus

Reputation: 2424

You can rotate the labels using the rotation svg attribute.

<XAxis
  data={data}
  svg={{ rotation: 30 }}
/>

Upvotes: 2

Related Questions