react-native-svg-charts: Label are not showing properly/overlapping
Lables are not showing properly, My Code
import React from 'react'
import { BarChart, XAxis } from 'react-native-svg-charts'
import { View } from 'react-native'
import * as scale from 'd3-scale'
class ChartExample extends Component {
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>
)
}
}
I tried all barcharts example its the same issue with labels, anyone knows whats the issue.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 38 (15 by maintainers)
found the issue buddy. Issue was with svg dependency. Your charts library supports <= 5.5.1 react-native-svg. Mine was 6.3.1 so i downgraded to 5.5.1 and it works. Anyway thanks
@burhanahmed92 Kindly respect that this is an open source project, if you find something lacking you are more than welcome to contribute. This is something I work on on my spare time, for free. I have had very little feedback on people having problems with this library seeing how many people use it and I try to help out as much as possible with those who do. Please show respect to people working on open source.
@dhcmega Please provide a reproducible example in a new issue. So far I haven’t been able to reproduce a single issue of overlapping labels that has been reported