Incorrect layered-charts , when the values in second chart is zero.

What is the problem?

The scale for chart one and chart 2 differs when the maximum value in both the data sets are different or When second area chart has maximum value like 1, 5 etc. –>

What platform?

• Android

React Native version: 0.55.2

Code to reproduce

 render() {

   

        const data0  = [ 50, 10, 40, 95, 0, 0, 85, 91, 35, 53, 0, 24, 50, 0, 0 ]
        const data1 =  [ 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0 ]
        return (
            <View style={ { flexDirection: 'row', height: 200 } }>
                <AreaChart
                    style={ { flex: 1 } }
                    data={ data0 }
                    svg={{ fill: 'rgba(134, 65, 244, 0.5)' }}
                    contentInset={ { top: 20, bottom: 0 } } 
                    curve={ shape.curveNatural }
                    ticks={1}
                >
                    
                </AreaChart>
                <AreaChart
                    style={ StyleSheet.absoluteFill }
                    data={ data1 }
                    svg={{ fill: 'rgba(34, 128, 176, 0.5)' }}
                    contentInset={ { top: 20, bottom: 0 } }
                    curve={ shape.curveNatural }
                    ticks={1}
                />

            </View>
        )
    }

[sarykemmoun]

Finally, I fixed it by removing contentInset={{ top: 40, bottom: 20 }}, adding yMin={0} And using custom the cy property of the decorator (react-native-svg.Circle) in case of value 0 to avoid the decorator to be cut.

[sarykemmoun]

Thanks, @JesperLekland for the response. yMin didn’t solve it for me. I think that its because of this line contentInset={{ top: 40, bottom: 20 }} I must set the bottom to avoid the decorator to be cut off. Do you have any solution for it?