react-native-svg-charts: Label are not showing properly/overlapping

http://prntscr.com/j45qov

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)

Most upvoted comments

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