YAxis labels are cut off

What is the problem?

The YAxis labels are not fully displayed, they are cut off both at the left and right side.

When does it happen?

When attempting to make a simple Line Chart with a YAxis.

What platform?

• iOS
• Android 7

React Native version: 0.55.4

Code to reproduce

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';

import { AreaChart, LineChart, Grid, YAxis } from "react-native-svg-charts";
import * as shape from 'd3-shape';

export default class App extends Component {
    render() {

        const data = [ 1945, 1960, 1980, 2010, 1995, 2024]

        const contentInset = { top: 20, bottom: 20 }

        return (
            <View style={{ height: 200, flexDirection: 'row', margin: 20}}>
                <YAxis
                    style={{padding: 10}}
                    data={ data }
                    svg={{
                        fill: 'grey',
                        fontSize: 16,
                        padding: 20
                    }}
                    numberOfTicks={ 10 }
                    formatLabel={ value => `${value} SR` }
                />
                <LineChart
                    style={{ flex: 1, marginLeft: 16 }}
                    data={ data }
                    curve={ shape.curveNatural }
                    svg={{ stroke: 'rgba(134, 65, 244, 0.8)', strokeWidth: 2}}
                >
                </LineChart>
            </View>
        )
    }
}

[mikerodham]

Here’s how I’ve solved it: formatLabel={ value => ' ' + ${value} Items + ' ' } where previously I would see item with half the of the M cut off, adding in these extra spaces made it render correctly.

[McPatto]

Have the same issue, but with XAxis. I cpuldn’t figure out how to add height to svg container