Cannot adjust padding for inner container

[designly1]

I'm using a custom render on the dots to print the abbreviated value above the dot instead of using a y axis legend. However, the top-most value gets cut off by the upper boundary of the chart's container. I tried adding padding top to both the chart component itself, as well as the chart props. Adding paddingTop to the chart component props does add padding but it's only to the outer container. Adding any styles to the style prop in the chartConfig prop seems to have no effect. Any help would be greatl appreciated! I created an Expo Snack for your convenience!

https://snack.expo.dev/@devlylabs/chart-example-with-dot-labels

Thanks in advance for any help!

[Anjali111199]

I'm also having same issue.

[nelsona]

To add top padding to the graph containers you will need to make changes to the library code as there are no props exposed that allow you to move the SVG components around in the main SVG container.

For the LineGraph you need to make changes in the node_modules/react-native-chart-kit/dist/line-chart/LineChart.js file as follows:

Change line 379 to:

var legendOffset = this.props.data.legend ? height * 0.15 : chartConfig.yOffset ?? 0;

You will also need to update the node_modules/react-native-chart-kit/dist/AbstractChart.d.ts file and add the following to the AbstractChartConfig:

    yOffset?: number;

You can then use this value in your chartConfig like this:

chartConfig={{
                    ...
                    yOffset: 20,
                  }}

[designly1]

To add top padding to the graph containers you will need to make changes to the library code as there are no props exposed that allow you to move the SVG components around in the main SVG container.

For the LineGraph you need to make changes in the node_modules/react-native-chart-kit/dist/line-chart/LineChart.js file as follows:

Change line 379 to:

var legendOffset = this.props.data.legend ? height * 0.15 : chartConfig.yOffset ?? 0;

You will also need to update the node_modules/react-native-chart-kit/dist/AbstractChart.d.ts file and add the following to the AbstractChartConfig:

    yOffset?: number;

You can then use this value in your chartConfig like this:

chartConfig={{
                    ...
                    yOffset: 20,
                  }}

Hi, thanks for your suggestion! Looking for a PR on this?