I am making a line chart using react-native-gifted-charts, but there seems to be a margin on the left side of the chart that i cant remove. I’ve looked through the linechart properties but can’t find anything about this gap.
Here are the relevant parts of my code:
<View style={[styles.container, { backgroundColor: colors.background }]}>
<View style={styles.upper}>
<View style={[styles.ChartContainer, { backgroundColor: colors.darkestAccent }]}>
<LineChart
data = {data}
width={screenWidth * 0.9}
height={220}
adjustToWidth={true}
backgroundColor={'transparent'}
isAnimated={false}
initialSpacing={0}
endSpacing={0}
color={colors.colorAccent}
hideDataPoints={true}
pointerConfig={Pointer}
focusEnabled={true}
hideYAxisText={true}
hideRules={true}
hideOrigin={true}
yAxisIndicesColor={false}
hideAxesAndRules={true}
/>
</View>
</View>
<View style={styles.lower}>
<Link href={'/log'} asChild>
<Button
dark={true}
icon="plus"
mode="contained"
rippleColor={colors.darkerAccent}
style={{ backgroundColor: colors.lightAccent }}
contentStyle={{ height: 60, width: 240 }}
labelStyle={{ fontSize: 18 }}
>
Log Excercise
</Button>
</Link>
</View>
</View>
Here is my stylesheet incase that is also necessary:
const styles = StyleSheet.create({
container: {
display: 'flex',
flexDirection: 'column',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
upper: {
flex: 9,
justifyContent: 'center',
alignItems: 'center',
width: '100%',
},
lower: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
},
ChartContainer: {
display: 'flex',
flex: 0.75,
borderRadius: 10,
width: '90%',
justifyContent: 'center',
alignItems: 'center',
},
});