X-axis label is not showing correctly And The vertical grid lines is Incomplete

[bhavesh-trentium]

X-axis label is not showing correctly. Can we wrap this label?

The vertical grid lines in the Bar Chart component do not extend to the bottom of the chart area, resulting in an incomplete grid visualization.

"gifted-charts-core": "^0.1.30", "react-native-gifted-charts": "^1.4.29", "react": "18.2.0", "react-dom": "18.2.0", "expo": "^49.0.21",

Code:

const data=[
                        {
                          value: 15,
                          label: 'Number of smatches',
                          frontColor: '#4BC0C0',
                          barBorderColor: '#4BC0C0',
                          barWidth: 50,
                          barBorderRadius: 4,
                          barBorderWidth: 1,
                          spacing: 50,
                        },
                        {
                          value: 40,
                          label: 'Number of unique views',
                          frontColor: '#4BC0C0',
                          barBorderColor: '#4BC0C0',
                          barWidth: 50,
                          barBorderRadius: 4,
                          barBorderWidth: 1,
                          spacing: 50,
                        },
                        {
                          value: 10,
                          label: 'Number of applications',
                          frontColor: '#4BC0C0',
                          barBorderColor: '#4BC0C0',
                          barWidth: 50,
                          barBorderRadius: 4,
                          barBorderWidth: 1,
                          spacing: 50,
                        },
                      ]
<BarChart
        data={data}
        width={Dimensions.get('window').width - 120}
        height={290}
        dashGap={0}
        showVerticalLines={true}
        noOfSections={5}
        xAxisLabelTextStyle={{
          display: 'flex',
          flexWrap: 'wrap',
        }}/>

[Abhinandan-Kushwaha]

Hi @bhavesh-trentium Thanks for reporting this issue. It has been fixed from versions 1.4.31 onwards. Please use the latest version of the library.

For the labels getting cut off, you can use rotateLabels or xAxisTextNumberOfLines