react-native-chart-kit
react-native-chart-kit copied to clipboard
[Question] Removing padding
Hey,
First of all thanks for this great component - really useful and straightforward. However there is something that I don't know how to achieve with LineChart. It renders a padding in the view on the left and bottom side (see screenshot below - padding marked with red overlay). Is there any way to remove this padding? Thanks!
I don't think there is a way. It was built with labels in mind. I'd welcome a PR that removes the padding if there are no labels.
Thank you @Hermanya I'll look into it in the near future then!
has anyone figured out how to center the graph , given that the left margin is not changeable?
+1
@Hermanya this feature is now changeble?
@igorgomeslima that PR was never merged
Yeah @Hermanya, I see this on your comment Here...
I'm trying to set up a configuration to remove the "additional paddings" and "round only borderBottomRight
" of LineChart, but without success...
Is that supported?
With code:
<View>
<LineChart
data={{
datasets: [
{
data: [/*...*/]
}
]
}}
width={300}
height={300}
yAxisLabel=""
yAxisSuffix=""
chartConfig={{
backgroundColor: "#e26a00",
backgroundGradientFrom: "#fb8c00",
backgroundGradientTo: "#ffa726",
propsForLabels: {
fontSize: "11"
},
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
},
propsForDots: {
r: "6",
strokeWidth: "2",
stroke: "#ffa726"
}
}}
withVerticalLabels={false}
withHorizontalLabelsLabels={false}
withInnerLines={false}
withOuterLines={false}
bezier
style={{
borderBottomRightRadius: 15,
paddingRight:0
}}
/>
</View>
+1
+1
style={{ paddingRight:0, }}
will remove the right space of the chart so that if you want to hide the labels at will start at the left of the screen.
I have the same issue, and this snack code has the same in lineChart snack code, right margin is too big, and paddingRight: 0 does not remove it
The same happens to me, with paddingRight: 0
I ironically remove the left padding, but I still have a rightPadding of size 16. My only solution is to set the chart's width as SCREEN_WIDTH + 16
but it seems there should be a better solution
@ManuViola77's solution worked but it feels gross sending that out into production 😂
Any new solution ?
Need a solution to?
There is still no solution to this one, is there? The charts look generally cool, but like this it is very hard to style.
Yeah @Hermanya, I see this on your comment Here...
I'm trying to set up a configuration to remove the "additional paddings" and "round only
borderBottomRight
" of LineChart, but without success...Is that supported?
With code:
<View> <LineChart data={{ datasets: [ { data: [/*...*/] } ] }} width={300} height={300} yAxisLabel="" yAxisSuffix="" chartConfig={{ backgroundColor: "#e26a00", backgroundGradientFrom: "#fb8c00", backgroundGradientTo: "#ffa726", propsForLabels: { fontSize: "11" }, decimalPlaces: 2, // optional, defaults to 2dp color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`, labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`, style: { borderRadius: 16 }, propsForDots: { r: "6", strokeWidth: "2", stroke: "#ffa726" } }} withVerticalLabels={false} withHorizontalLabelsLabels={false} withInnerLines={false} withOuterLines={false} bezier style={{ borderBottomRightRadius: 15, paddingRight:0 }} /> </View>
Try This
style={{ height: 25, // half of height prop width: 85, // adujust to width paddingTop: 0, paddingRight: 0, }}