Open vinaygoyal20 opened 3 years ago
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`
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
What is the problem?
When does it happen?
What platform?
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 {
}
export default XAxisExample