React-native-chart-kit: [Question] Removing padding

[halaszbalazs]

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!

[Hermanya]

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.

[halaszbalazs]

Thank you @Hermanya I'll look into it in the near future then!

[JaredDahlke]

has anyone figured out how to center the graph , given that the left margin is not changeable?

[rodriguezmanu]

+1

[igorgomeslima]

@Hermanya this feature is now changeble?

[Hermanya]

@igorgomeslima that PR was never merged

[igorgomeslima]

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>

[RominHalltari]

+1

[tayloraleach]

+1

[auriga-dev]

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.

[ruiaraujolink]

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

[ManuViola77]

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