react-native-chart-kit icon indicating copy to clipboard operation
react-native-chart-kit copied to clipboard

[Question] Removing padding

Open halaszbalazs opened this issue 5 years ago • 15 comments

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!

screenshot

halaszbalazs avatar Aug 27 '19 13:08 halaszbalazs

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.

Hermanya avatar Aug 27 '19 14:08 Hermanya

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

halaszbalazs avatar Aug 27 '19 14:08 halaszbalazs

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

Jared-Dahlke avatar Sep 24 '19 17:09 Jared-Dahlke

+1

rodriguezmanu avatar Dec 05 '19 13:12 rodriguezmanu

@Hermanya this feature is now changeble?

igorgomeslima avatar Apr 02 '20 15:04 igorgomeslima

@igorgomeslima that PR was never merged

Hermanya avatar Apr 02 '20 15:04 Hermanya

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?

image

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>

igorgomeslima avatar Apr 02 '20 20:04 igorgomeslima

+1

RominHalltari avatar Apr 14 '20 09:04 RominHalltari

+1

tayloraleach avatar Jun 23 '20 18:06 tayloraleach

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.

auriga-dev avatar Feb 24 '21 10:02 auriga-dev

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

ruiaraujolink avatar Jul 14 '21 17:07 ruiaraujolink

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 avatar Aug 02 '21 23:08 ManuViola77

@ManuViola77's solution worked but it feels gross sending that out into production 😂

DanielWFrancis avatar Dec 13 '21 00:12 DanielWFrancis

Any new solution ?

rafaelaugustos avatar May 15 '22 23:05 rafaelaugustos

Need a solution to?

99Jannis99 avatar Jun 01 '22 08:06 99Jannis99

There is still no solution to this one, is there? The charts look generally cool, but like this it is very hard to style.

SakeFabi avatar Nov 06 '22 20:11 SakeFabi

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?

image

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, }}

mahirsodagar avatar Nov 16 '22 13:11 mahirsodagar