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

Question

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

Abhinandan Kushwaha · Accepted Answer · 2024-07-31 02:10:46Z

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.

answered Jul 31, 2024 at 2:10

Abhinandan Kushwaha

8288 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related