React-native-svg-charts: The examples code is old and needs to be update especially the bar chart with x axis

[vinaygoyal20]

What is the problem?

When does it happen?

What platform?

• [ ] iOS
• [ ] Android

react-native version: 0.63.2
react-native-svg-charts version: 5.4.0
react-native-svg version: 12.1.0

Code to reproduce

import React from 'react'
import { BarChart, XAxis } from 'react-native-svg-charts'
import { View } from 'react-native'
import * as scale from 'd3-scale'

class XAxisExample extends React.PureComponent {

render() {

    const data = [ 14, 80, 100, 55 ]

    return (
        <View style={{ height: 200, padding: 20 }}>
            <BarChart
                style={{ flex: 1 }}
                data={data}
                gridMin={0}
                svg={{ fill: 'rgb(134, 65, 244)' }}
            />
            <XAxis
                style={{ marginTop: 10 }}
                data={ data }
                scale={scale.scaleBand}
                formatLabel={ (value, index) => index }
                labelStyle={ { color: 'black' } }
            />
        </View>
    )
}

}

export default XAxisExample

[vinaygoyal20]

Below is the currently working code
svg prop is required for xaxis to render on screen.unless it doesn't display anthing
By default barchart has some spacing inner value which is 0.05, providing the same make the xaxis text aligned with bar chart
`
import React from 'react'
import { BarChart, XAxis } from 'react-native-svg-charts'
import { View } from 'react-native'
import * as scale from 'd3-scale'

class XAxisExample extends React.PureComponent {

render() {

    const data = [ 14, 80, 100, 55 ]

    return (
        <View style={{ height: 200, padding: 20 }}>
            <BarChart
                style={{ flex: 1 }}
                data={data}
                gridMin={0}
                svg={{ fill: 'rgb(134, 65, 244)' }}
            />
            <XAxis
                style={{ marginTop: 10 }}
                data={ data }
                scale={scale.scaleBand}
                spacingInner={0.05}
                svg={{fontSize:10,fill:"grey"}}
                formatLabel={ (value, index) => index }
                labelStyle={ { color: 'black' } }
            />
        </View>
    )
}

}

export default XAxisExample`

[mohity777]

Thanks bro your solution didnt help me directly but indirectly it helped me so much. Thanx.
Conclusion from your answer-->
1) use scale.scaleBand
2) contentInset, spacingInner ,spacing and spacing outer should be same for both bar chart and y-axis/ax-axis