The XAxis and YAxis does not display properly

[jasperyiu]

The x-axis and y-axis is crashed like the following picture

What platform?

Platform: IOS13.5.1

react-native version: 0.57.63 react-native-svg-charts version: "^5.3.0"

Code to reproduce

class TrendComponent extends React.Component<ITrendComponentProps> { constructor(props) { super(props); }

render() {
    const verticalContentInset = { top: 10, bottom: 10 }
    const horizontalContentInset = { left: 10, right: 10 }
    const xAxisHeight = 15
    const xAxisLabelHeight = 10
    const axesSvg = { fontSize: 10, fill: 'grey'};

    return (
        <View style={{ flex: 1, padding: 10, flexDirection: 'row' }}>
            <View style={{ justifyContent: "center", marginBottom: xAxisHeight + xAxisLabelHeight }}>
                <Text style={{ fontSize: 10, color: "grey", textAlign: "center" }}>Net</Text>
                <Text style={{ fontSize: 10, color: "grey", textAlign: "center" }}>($)</Text>
            </View>
            <YAxis
                data={this.props.data}
                style={{ marginBottom: xAxisHeight + xAxisLabelHeight }}
                contentInset={verticalContentInset}
                svg={axesSvg}
                numberOfTicks={2}
            />
            <View style={{ flex: 1, marginLeft: 10 }}>
                <LineChart
                    style={{ flex: 1 }}
                    data={this.props.data}
                    svg={{ stroke: 'rgb(134, 65, 244)' }}
                    contentInset={verticalContentInset}
                >
                    <Grid />
                </LineChart>
                <XAxis
                    style={{ marginHorizontal: -10, height: xAxisHeight }}
                    data={this.props.data}
                    formatLabel={(value, index) => index}
                    contentInset={horizontalContentInset}
                    svg={axesSvg}
                />
                <View style={{ height: xAxisLabelHeight }}>
                    <Text style={{ fontSize: 10, color: "grey", textAlign: "center" }}>No. of Games</Text>
                </View>
            </View>
        </View>
    );
}

}

[theRealSheng]

Add: yAccessor={({ index }) => index} --> YAxis xAccessor={({item, index})=> item} --> XAxis