React-native-svg-charts: XAxis and YAxis Values getting repeated

[MithunKakkara]

What is the problem?

XAxis and YAxis Values getting repeated

When does it happen?

Hi,
i am new to react native and i am trying to add some charts to my app, and i dont know why some labels are getting repeated

What platform?

• [ ] iOS
• [x] Android

React Native version: 0.57.5

Code to reproduce

render() {

    const data = [
        {
            value: 50,
            label: 'One',
        },
        {
            value: 10,
            label: 'Two',
        },
        {
            value: 40,
            label: 'Three',
        },
        {
            value: 95,
            label: 'Four',
        },

    ]
    return (
     <Container>

        <View style={{ flexDirection: 'column', height: 200, paddingVertical: 16 }}>

                <BarChart
                    style={{ flex: 1}}
                    data={data}
                    yAccessor={({ item }) => item.value}
                    svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
                    contentInset={{ top: 10, bottom: 10 }}
                    spacing={0.2}
                    gridMin={0}
                >
                    <Grid direction={Grid.Direction.HORIZONTAL}/>
                </BarChart>
                <XAxis
                    data={data}
                    scale={scale.scaleBand}
                    formatLabel={(_, index) => data[ index ].label}
                />
            </View>
            <View style={{ flexDirection: 'row', height: 200, paddingVertical: 16 }}>
                <YAxis
                    data={data}
                    yAccessor={({ index }) => index}
                    scale={scale.scaleBand}
                    contentInset={{ top: 10, bottom: 10 }}
                    spacing={0.2}
                    formatLabel={(_, index) => data[ index ].label}
                />
                <BarChart
                    style={{ flex: 1, marginLeft: 8 }}
                    data={data}
                    horizontal={true}
                    yAccessor={({ item }) => item.value}
                    svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
                    contentInset={{ top: 10, bottom: 10 }}
                    spacing={0.2}
                    gridMin={0}
                >
                    <Grid direction={Grid.Direction.VERTICAL}/>
                </BarChart>
            </View>
      </Container>
    );
  }

[GioDavid]

Using the bar chart component, with the react native app with version 0.57.2 and the version of this library in 5.2.0 I got the same issue, the first label looks repeated in the XAxis as shown in the image below:

[mbm-code]

Same issue. How to fix it?

[JesperLekland]

fixed in https://github.com/JesperLekland/react-native-svg-charts/pull/256/files