Horizontal bar chart with different positive-negative values not centred

What is the problem?

Sorry if I am missing anything and also I am filing a bug for the first time so, I have checked all the issue and I didn't found similar to mine.

I want to show a positive negative bar chart in which the bar should start rendering from the center of view instead of depending on the values.

This is what I want for all the values, I mean bar should start from the center. right

This is what is renders if the negative values are higher then positive or vice versa wrong

When does it happen?

If there is a large difference between 2 positive and negative values then it renders left or right depends on which value is higher.

What platform?

React Native Environment Info: System: OS: macOS 10.15.1 CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz Memory: 39.62 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 13.2.0 - /usr/local/bin/node npm: 6.13.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 Android SDK: API Levels: 23, 26, 27, 28, 29 Build Tools: 28.0.3, 29.0.2 System Images: android-27 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom IDEs: Android Studio: 3.5 AI-191.8026.42.35.6010548 Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild npmPackages: react: 16.6.3 => 16.6.3 react-native: ^0.59.9 => 0.59.10 npmGlobalPackages: react-native-cli: 2.0.1

Code to reproduce


 const data = [1, -1, 0.1252]
        const pieData = data
            .map((value, index) => ({
                value,
                svg: {
                    fill: color[index],
                    onPress: () => console.log('press', index),
                },
                key: `pie-${index}`,
            }))

 <View style={{ flexDirection: 'row', height: 200, width: width - 60, alignItems: 'center', marginTop: 10 }}>
                                    <BarChart
                                        style={{ flex: 1, marginLeft: 8, width: 20 }}
                                        scale={scale.scaleLinear}
                                        data={pieData}
                                        horizontal={true}
                                        yAccessor={({ item }) => item.value}
                                        contentInset={{ top: 5, bottom: 5 }}
                                        spacingInner={(horizontalChartData.length) * 0.2}
                                    >
                                        <Grid direction={Grid.Direction.VERTICAL} />
                                    </BarChart>
                                </View>

JesperLekland / react-native-svg-charts