Change pointerLable style on a certain index in LineChart

[julienclaerhout]

As you can see on the provided image, I have a Line chart with pointerLabels.
My issue is when I want to visualize a pointerLabel on the ends of my chart, the lables are crop by the size of the chart.
Is there a way to resolve this? Or get the index of the pointer to change label style?

Here is my code :

`
const CarboChart = ({ graphData, period }) => {

    const customDataPoint = () => {
        return (
            <Block style={styles.customDataPoint}/>
        );
    };

    const pointerLabelComponent = (items) => {
        return (
            <Block>
                <Block style={styles.PointerLabelDate}>
                    <Text style={styles.PointerLabelDateText}>{items[0].date}</Text>
                </Block>
                <Block style={styles.PonterLabelValue}>
                    <Text style={styles.PonterLabelValueText}>{items[0].value + ' g'}</Text>
                </Block>
            </Block>
        );
    };

    const maxDataPoint = Math.max(...graphData.map(item => item.value));

    const data = graphData.map((item, index) => {

        // position of dataPoints labels on the chart
        let shiftX, shiftY;
        if (index === 0) { shiftX = 30, shiftY = 0 } //first
        else if (index === graphData.length - 1) { shiftX = -15, shiftY = 0 } //last
        else if (index === Math.floor(graphData.length / 2)) { shiftX = 30, shiftY = 0 } //middle
        else if (item.value === maxDataPoint) { shiftX = 10, shiftY = 20 } //max

        if (index === 0 || index === graphData.length - 1 || index === graphData.length / 2 || item.value === maxDataPoint) {
            return {
                ...item,
                customDataPoint: customDataPoint,
                dataPointLabelComponent: () => {
                    return (
                        <Block key={index} style={styles.dotContent}>
                            <Text style={styles.dotContentText}>{item.value} g</Text>
                        </Block>
                    );
                },
                dataPointLabelShiftY: shiftY,
                dataPointLabelShiftX: shiftX,
            };
        } else {
            return { ...item, hideDataPoint: true };
        }
    });

    const dataWithLabels = data.map((item, index) => {
        if (period === 'lastWeek') {
            if (index === 1 || index === 3 || index === 5) {
                return {
                    ...item,
                    label: item.date,
                };
            } else {
                return item;
            }
        } else {
            return item;
        }
    });

    return (
        <Block style={styles.container}>
            <LineChart
                data={dataWithLabels}
                curved
                curveType={1}
                initialSpacing={7}
                maxValue={maxDataPoint + 200}

                width={Dimensions.get('window').width - 40}
                height={170}
                spacing={period === 'lastWeek' ? Dimensions.get('window').width - 338 : period === 'lastTwoWeeks' ? Dimensions.get('window').width / 17.7 : Dimensions.get('window').width / 40}
                disableScroll

                // animation
                isAnimated
                animationDuration={1000}

                // axis
                noOfSections={6}
                xAxisThickness={0}
                /* xAxisColor="rgba(157, 208, 48, 0.5)" */
                xAxisLabelTextStyle={styles.AxisLabels}

                yAxisThickness={0}
                /* yAxisLabelWidth={0} */
                yAxisTextStyle={styles.AxisLabels}
                yAxisLabelSuffix=" g"

                // grid
                showVerticalLines
                verticalLineUptoDataPoint={true}
                verticalLinesColor="rgba(157, 208, 48, 0.5)"
                hideRules  //hide vertical dotted lines
                /* rulesType="solid"
                rulesColor="rgba(157, 208, 48, 0.5)"
                rulesLength={Dimensions.get('window').width - 60} */

                // lineStyle
                color="rgba(157, 208, 48, 1)"
                startFillColor={COLORS.CLEARGREEN}
                startOpacity={0}
                endFillColor={COLORS.CLEARGREEN}
                endOpacity={0}

                // labels on chart press
                pointerConfig={{
                    pointerStripHeight: 110,
                    pointerStripColor: COLORS.DARKGREEN,
                    pointerStripWidth: 2,
                    pointerColor: COLORS.DEFAULT,
                    pointerBorderColor: COLORS.DARKGREEN,
                    pointerLabelWidth: 60,
                    pointerLabelHeight: 40,
                    shiftPointerLabelX: -20,
                    shiftPointerLabelY: -37,
                    focusEnabled: true,
                    pointerLabelComponent: pointerLabelComponent
                }}
            />
        </Block>
    );
};

`