React-native-chart-kit: How can I remove margin on the left on LineChart or any other ? 🤔

[Canya1607]

I tried to fix this issue with any props from the library (propsForHorizontalLabels, chartConfig, etc.) but didn`t found any solution. So do you have a quick solution for this or it can be fixed only by modifying the library properly?

P.S. Great library, but there are some restrictions for building graphics =)

[anantaramdas]

Very interesting in this subject too

[Mirzatalha]

This is a library issue.. i used a temporary solution
i disabled both labels
withVerticalLabels={false}
withHorizontalLabels={false}

and
in style component povided marginhorizontal: -16 (or whatever you want)
did the trick for me
hope it's any help

[imransiddiquiandroid]

I have same problem

[imransiddiquiandroid]

@Mirzatalha
data={data}
width={screenWidth-20}
height={220}
chartConfig={chartConfig}
withVerticalLines={false}
withHorizontalLines={false}
withVerticalLabels={false}
withHorizontalLabels={false}
// onDataPointClick={({ value, getColor }) =>
// Alert.alert("Details",${value})}
style={{
marginhorizontal: -16
}}
withDots={false}
// bezier
/>

const chartConfig = {
backgroundColor: CardBackGroundColor,
backgroundGradientFrom: CardBackGroundColor,
backgroundGradientTo: CardBackGroundColor,
backgroundGradientFromOpacity: 1,
backgroundGradientToOpacity: 1,
color: (opacity = 1) => rgba(255, 255, 255, ${opacity}),
labelColor: (opacity = 1) => rgba(255, 255, 255, ${opacity}),
barPercentage: 1,
// useShadowColorFromDataset:false, // optional
style: {
marginhorizontal:-16
},
};

Not Working

[Mirzatalha]

@imransiddiquiandroid

                    <LineChart
                        data={{whatever your data is
                        }}
                        withInnerLines={false}
                        withOuterLines={false}
                        withVerticalLines={true}
                        withVerticalLabels={false}
                        withHorizontalLabels={false}
                        width={Dimensions.get("window").width} // from react-native
                        height={220}

                        chartConfig={{
                            backgroundColor: "white",
                            backgroundGradientFrom: "#fff",
                            backgroundGradientTo: "#fff",
                            decimalPlaces: 2, // optional, defaults to 2dp
                            color: (opacity = 1) => `rgb(45, 45, 98,${opacity})`,
                            labelColor: (opacity = 1) => `rgb(45, 45, 98, ${opacity})`,
                            style: {
                                borderRadius: 16,
                            },
                            propsForDots: {
                                r: "7",
                                strokeWidth: "0",
                                stroke: "white"
                            }
                        }}
                        bezier
                        style={{
                            marginVertical: 18,
                            marginHorizontal: -20, //You can style here
                            borderRadius: 16
                        }}
                    />

[vaibhavgadekar]

@imransiddiquiandroid

                    <LineChart
                        data={{whatever your data is
                        }}
                        withInnerLines={false}
                        withOuterLines={false}
                        withVerticalLines={true}
                        withVerticalLabels={false}
                        withHorizontalLabels={false}
                        width={Dimensions.get("window").width} // from react-native
                        height={220}

                        chartConfig={{
                            backgroundColor: "white",
                            backgroundGradientFrom: "#fff",
                            backgroundGradientTo: "#fff",
                            decimalPlaces: 2, // optional, defaults to 2dp
                            color: (opacity = 1) => `rgb(45, 45, 98,${opacity})`,
                            labelColor: (opacity = 1) => `rgb(45, 45, 98, ${opacity})`,
                            style: {
                                borderRadius: 16,
                            },
                            propsForDots: {
                                r: "7",
                                strokeWidth: "0",
                                stroke: "white"
                            }
                        }}
                        bezier
                        style={{
                            marginVertical: 18,
                            marginHorizontal: -20, //You can style here
                            borderRadius: 16
                        }}
                    />

still have same problem

[adamawang]

Default styling seems to be set to the following in the line chart component specifically:

paddingTop = 16
paddingRight = 64

Adjusting styles on the line chart fixed the width and height issues I was dealing with.

style={{
    paddingTop: 0,
    paddingRight: 0,
}}