X轴标签在react-native svg图表中重叠

Question

我正在使用react-native-svg-charts在react-native中显示饼图和条形图，在条形图中，X轴标签重叠或不显示。

​

​

如何在条形图中呈现X轴上的文本内容

这是我的代码

<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' }}
   />

Answer 1

<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' }}/>

将formatLabel从

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

至

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

Answer 2

可以使用rotation svg属性旋转标签。

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