How to change labels of LineChart in react-native-chart-kit

I drawed a graph in react native using sql server data and php backEnd ;

But I want to modify my label (value existing in x of graph)

export default class Home extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
         isLoading: true,
         data: {
             labels: [],
             datasets: [
                 {
                     data: [],
                 }
             ]
         }
      }
  }
  componentDidMount() {
   this.GetData();
   }
  GetData = () => {
      const self = this;
      return fetch('http://192.168.1.5:80/graph.php')
      .then((response) => response.json())
      .then((responseJson) => {
        const dataClone = {...self.state.data}
        const values = responseJson.map(value => value.ChiffreAffaire);
        const label = responseJson.map(value => value.M500_NOM);

      dataClone.datasets[0].data = values;
      dataClone.labels= label;

        this.setState({
          isLoading: false,
          data: dataClone,
        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

  render() {
    const fill='rgb(134,65,244)'
    if(this.state.isLoading){
    return(
      <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
    )
  }
      return (

        <View style={{flex: 1}}>

      <View style={{backgroundColor:'#58ACFA',flex:1,justifyContent: 'center'}}>
            <TouchableOpacity style={{marginTop:32,marginLeft:20}} onPress={this.props.navigation.openDrawer }>
            <FontAwesome5 name="bars" size={24} color="#161924" />
            </TouchableOpacity >
            </View>

            <ScrollView >
            <LineChart
            data={this.state.data}
            width={Dimensions.get("window").width*0.9}
            height={400}
            yAxisLabel={"DH"}
            chartConfig={chartConfig}
            bezier
            style={{
              marginTop:40,
              marginLeft:20,
              fontSize:1,
            }}
            />
            </ScrollView>

            </View>

As you see in this graph ,I should mention the names of Client but It’s not lisible because it’s it’s condensed , If there is any option to mention them when I click on the button or to write it in vertical way ;

Please ,Any Idea ???

Answer

You can use verticalLabelRotation to rotate labels in x-axis.

In your code you can use like this

<LineChart
        verticalLabelRotation={110} //Degree to rotate
        data={this.state.data}
        width={Dimensions.get("window").width*0.9}
        height={400}
        yAxisLabel={"DH"}
        chartConfig={chartConfig}
        bezier
        style={{
          marginTop:40,
          marginLeft:20,
          fontSize:1,
        }}
       />

Advertisement

Answer