react-nativereact-native-chart-kit

modify label's width in react-native-chart-kit


Im drawing chart with my dynamic values and I need to know 2 things :

1/ modify the width of labels in x and y using the LineChart of react-native-chart-kit !!

2/ control the scale of my graph

If you know a proporties or options that can make this ;

 <LineChart
            data={this.state.data}
            width={Dimensions.get("window").width*0.9}
            height={400}
            //yAxisLabel={"DH"}
            chartConfig={chartConfig}
            bezier
            spacing={0.8}
            spacingInner={0.8}
            verticalLabelRotation={90}
            style={{
              marginTop:40,
              marginLeft:20,
              fontSize:1,
            }}
            />
const chartConfig = {
  backgroundColor: "#f5f3ed",
  backgroundGradientFrom: "#f5f3ed",
  backgroundGradientTo: "#f5f3ed",
  //decimalPlaces: 2, // optional, defaults to 2dp
  color: (opacity = 1) => `rgba(3, 2, 2, ${opacity})`,
  labelColor: (opacity = 1) => `rgba(3, 2, 2, ${opacity})`,
  barPercentage: 0.5,
  style: {
    borderRadius: 16
  },
  propsForDots: {
    r: "6",
    strokeWidth: "2",
    stroke: "#ffa726"
  }
}

Solution

    1. propsForLabels can be used to override styles of the labels, react-native-svg
    2. Scale of your graph is proportional to the extreme values of your data set. If you are looking to reduce the scale that means your data should be between a considerably smaller range.