Pointer strip not working when tapping the data point

[harishgupta01]

Description

HI,

I have requirement where need to show the custom strip on focus as below where a solid black dot circle has to appear at the top of the strip and custom data point on focus.

• Do we have a way to to change the strip component so that I can add the solid dot at the top. I see that its possible using pointerLabelComponent n pointer config but I want to use the focus related props only as the requirement is to have the strip shown on tap on the data point keeping horizon tal scroll.
• I also need to show the custom focused data point whenever strip appear on any data point but I am passing both focusedCustomDataPoint and customDataPoint prop, the points start appearing at the left most chart vertically along with focus custom focus point. Not sure if I am missing anything. Please find attached the video :

ScreenRecording_02-06-2025.12-50-11_1.mov

Below is my Code
<View
onLayout={(event) => {
setChartWidth(event.nativeEvent.layout.width);
}}
style={{
marginTop: 100,
borderRadius: 12

    // height: 500,
    // backgroundColor: 'red'
    // marginHorizontal: 16
    // paddingVertical: 50,
    // paddingLeft: 16
  }}>
  <LineGiftedChart
    // width={chartWidth}
    //  rulesLength={chartWidth}
    // adjustToWidth
    // width={chartWidth - 70}
    // onFocus={handlePress}

    onPress={handlePress}
    data={transformedData}
    stepValue={stepValue}
    thickness={2}
    color={colors.inversePrimary}
    xAxisColor={colors.onSurfaceVariant}
    yAxisColor={colors.onSurfaceVariant}
    maxValue={yAxisMaxValue}
    yAxisThickness={1}
    xAxisThickness={1}
    noOfSections={NUMBER_OF_SECTIONS}
    unFocusOnPressOut={false}
    showDataPointLabelOnFocus
    xAxisLabelTextStyle={styles.labelText}
    yAxisTextStyle={styles.labelText}
    scrollToEnd
    focusEnabled
    showStripOnFocus
    stripWidth={1}
    stripColor={colors.primary}
    stripHeight={203}
    focusedCustomDataPoint={(item, index) => {
      return (
        <View
          style={{
            width: 20,
            height: 20,
            borderRadius: 10,
            backgroundColor: colors.onSurfaceVariant,
            borderWidth: 4,
            borderColor: 'white',
            shadowOffset: {
              height: 4,
              width: 0
            },
            elevation: 2,
            shadowOpacity: 0.2,
            shadowRadius: 2,
            zIndex: 20000
          }}
        />
      );
      //   setFocusedIndex(index);
    }}
    customDataPoint={(item, index) => {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars

      return (
        <View
          style={{
            width: 14,
            height: 14,
            backgroundColor: 'white',
            borderWidth: 4,
            borderRadius: 7,
            borderColor: colors.onSurfaceVariant
          }}
        />
      );
    }}
    spacing={dynamicSpacing + 10}
    rulesType="solid"
    showReferenceLine1
    referenceLine1Position={100}
    referenceLine1Config={{ color: 'red', dashGap: 3, dashWidth: 3, type: 'dashed' }}
    // pointerConfig={{
    //   pointerComponent: () => {
    //     return (
    //       <View
    //         style={{
    //           width: 20,
    //           height: 20,
    //           borderRadius: 10,
    //           backgroundColor: colors.onSurfaceVariant,
    //           borderWidth: 4,
    //           borderColor: 'white',
    //           shadowOffset: {
    //             height: 4,
    //             width: 0
    //           },
    //           elevation: 2,
    //           shadowOpacity: 0.2,
    //           shadowRadius: 2,
    //           left: -5,
    //           bottom: 3
    //         }}
    //       />
    //     );
    //   },
    //   pointerLabelComponent: (value) => {
    //     setFocusedIndex(value[0].index);
    //     console.log(`Harish:::Pointer:::index: = ${JSON.stringify(value)}`);
    //     return (
    //       // <View
    //       //   style={{
    //       //     width: 8,
    //       //     height: 8,
    //       //     borderRadius: 4,
    //       //     backgroundColor: colors.primary,
    //       //     left: 6,
    //       //     bottom: -3
    //       //   }}
    //       // />
    //       <View
    //         style={{
    //           left: 6,
    //           bottom: -5
    //         }}>
    //         <BlackDot />
    //       </View>
    //     );
    //   },
    //   pointerStripHeight: 203,
    //   showPointerStrip: true,
    //   pointerStripColor: colors.primary,
    //   pointerStripWidth: 2,
    //   pointerColor: colors.primary

    //   // persistPointer: true
    //   // /activatePointersOnLongPress: true

    //   // pointerVanishDelay: 3000,
    //   // initialPointerAppearDelay: 3000,
    //   // activatePointersDelay: 300
    // }}
  />

Hi @Abhinandan-Kushwaha Could you please let me know your thought? Thanks a lot for providing such a wonderful and easy to use library for chart.

Snack or a link to a repository

No response

version of react-native-gifted-charts

15.2.0

React Native version

0.72.7

Platforms

iOS

Workflow

None