Changer pointerLable style on a certain index in react-native-gifted-chart LineChart

Question

LineChart

As you can see on the provided image, I have a Line chart from react-native-gifted-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>
    );
};

I tried to retrieve the index of the pressed pointerLabel to apply différent position style to the ones on the ends of my chart but I wasn't able to get the indexes

Answer 1

pointerLabelComponent now accepts 3 parameters- items, secondaryDataItem and pointerIndex. You can position the first and last pointerLabelComponents so they don't overflow the chart area. The first and last pointerLabelComponents can be identified with the pointerIndex parameter.

This feature was added in react-native-gifted-charts in version 1.4.23. Please use the latest version of the library.