0

In react-native project I am using npm package "react-native-highcharts" for plotting a bar graph. I am facing problem to add padding between the bar and the yaxis label.

For plotting the graph the code I have used is as below: https://jsfiddle.net/y2uh60tc/

<View style={styles.cardView}>
     <View style={styles.headerView}>
          <Text style={styles.cardTitle}>Competition</Text>
     </View>
     <ChartView style={{ height: 300, marginTop: 5, overflow: 'hidden' }} config={conf} originWhitelist={['']} />
</View>

In mobile if i am trying to give padding in +/- values also its not working.

Can someone kindly help me to fix this.

iOSDev
  • 412
  • 10
  • 30

1 Answers1

1

You need to make more space in the plot area, for example by setting maxPadding option. To move the labels use stackLabels.x property:

yAxis: {
    ...
    maxPadding: 0.2,
    stackLabels: {
        ...,
        x: 30
    }
}

Live demo: https://jsfiddle.net/BlackLabel/jx02uw9p/

API Reference: https://api.highcharts.com/highcharts/yAxis.stackLabels.x

ppotaczek
  • 36,341
  • 2
  • 14
  • 24