Unable to use multi onPress in LineChart

[hamzafarooq-10P]

Description

I was using the 1.4.10 version for the same code and everything was working fine and multi onPress was also working fine. Then I upgraded to 1.4.47 version and with this version I am unable to accomplish this. What can I do to solve this problem?

Code:

import { LineChart, lineDataItem } from "react-native-gifted-charts";
const lineChartData1: lineDataItem[] = [];

<LineChart
          width={lineChartStyles.width}
          height={lineChartStyles.height}
          isAnimated
          data={prepareChartData1()}
          data2={prepareChartData2()}
          data3={prepareChartData3()}
          color1={lineChartStyles.color1}
          dataPointsColor1={lineChartStyles.dataPointsColor1}
          color2={lineChartStyles.color2}
          dataPointsColor2={lineChartStyles.dataPointsColor2}
          color3={lineChartStyles.color3}
          dataPointsColor3={lineChartStyles.dataPointsColor3}
          maxValue={getMaxValueForLineChart()}
          stepValue={20}
          yAxisThickness={0}
          dashWidth={graphConstants.dashWidth}
          dashGap={graphConstants.dashGap}
          xAxisType={lineChartStyles.xAxisType}
          xAxisColor={lineChartStyles.xAxisColor}
          rulesColor={lineChartStyles.rulesColor}
          yAxisTextStyle={graphStyles.axisStyle}
          xAxisLabelTextStyle={graphStyles.axisStyle}
        />

onPress logic:

const prepareChartData1 = () => {
    myArray.forEach((item) => {
      lineChartData1.push({
        value: item.result ?? 0,
        label: getExamShortName(item.name),
        onPress: () => {
          setLineChartPressedType(Enum.Result);
          setLineChartPressedValue(item.result ?? 0);
        },
      });
    });

    return lineChartData1;
  };

same logic goes for prepareChartData2 and prepareChartData3

Screenshot of LineChart:

Steps to reproduce

Whole detail is mentioned in Description section.

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.47

React Native version

0.75.4

Platforms

iOS

Workflow

React Native

[Abhinandan-Kushwaha]

Hi @hamzafarooq-10P Thanks for reporting this issue.
This has been fixed from versions 1.4.49 onwards. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/releases/tag/v1.4.49

Please use the latest version of the library.

[hamzafarooq-10P]

Hi @Abhinandan-Kushwaha , the reported issue was fixed in the mentioned update but a similar issue is occurring for focusedDataPointLabelComponent when using multi data. Should I create an issue regarding that as well or can you look into this separately please?

[Abhinandan-Kushwaha]

I will look into it @hamzafarooq-10P

[Abhinandan-Kushwaha]

Hi @hamzafarooq-10P Can you describe your issue? Please also attach your code and screenshots.

[hamzafarooq-10P]

@Abhinandan-Kushwaha here are the details:

const [data, setData] = useState<lineDataItem[]>([]);
const [targetData, setTargetData] = useState<lineDataItem[]>([]);
const processedData = [...results].reverse();

Tooltip code

const dataPointLabel = (
    result: OfficialResult,
    shouldShowPointer: boolean
  ) => {
    return (
      <View style={styles.tooltipContainer}>
        <View style={styles.tooltip}>
          <Text
            variant={"caption2"}
            style={styles.labelCourseNameStyle}
          >{`${result.name}:`}</Text>
          <Text variant={"caption2"} style={styles.labelScoreStyle}>
            {result.official_result}
          </Text>
        </View>
        {shouldShowPointer && <View style={styles.pointer} />}
      </View>
    );
  };

Data1 code

const lineDataResult = processedData.map(
        (result: OfficialResult, index) => ({
          value: result.official_result,
          hideDataPoint: false,
          focusedDataPointLabelComponent: () => {
            return dataPointLabel(
              result,
              index !== 0 && index !== results.length - 1
            );
          },
          dataPointWidth: styles.dataPointWidth.width,
          dataPointLabelShiftY: index === results.length - 1 ? 0 : -40,
          dataPointLabelShiftX: getLabelShiftX(index),
        })
      );

setData(lineDataResult);

Data2 code

const targetPoints: lineDataItem[] = [];
      let expectedPoints = results.length;
      if (expectedPoints < 2) expectedPoints = 2;
      for (let i = 0; i < expectedPoints; i++) {
        targetPoints.push({
          value: targetGoal,
          dataPointWidth: styles.targetDataPointWidth.width,
          focusedDataPointLabelComponent: () => {
            return dataPointLabel(
              {
                official_result: targetGoal,
                name: t("titles.myGoal"),
              },
              false
            );
          },
          dataPointLabelShiftX: -40,
          customDataPoint: () => {
            return targetDataPoint();
          },
          hideDataPoint: i !== expectedPoints - 1,
        });
      }

setTargetData(targetPoints);

Chart

<LineChart
        curved
        data={data}
        areaChart={true}
        zIndex1={2}
        zIndex2={1}
        disableScroll
        data2={targetData}
        focusEnabled
        adjustToWidth
        xAxisThickness={0}
        yAxisThickness={0}
        dashWidth={graphConstants.dashWidth}
        dashGap={graphConstants.dashGap}
        strokeDashArray1={[10, 4]}
        strokeDashArray2={[10, 4]}
        color1={styles.mainLineStyle.color}
        color2={styles.referenceLineStyle.color}
        thickness1={2}
        startFillColor1={styles.gradientStartStyle.color}
        startOpacity1={styles.gradientStartStyle.opacity}
        endOpacity1={styles.gradientEndStyle.opacity}
        endFillColor1={styles.gradientEndStyle.color}
        startFillColor2={styles.referenceGradientLineStyle.color}
        startOpacity2={styles.referenceGradientLineStyle.opacity}
        endOpacity2={styles.referenceGradientLineStyle.opacity}
        endFillColor2={styles.referenceGradientLineStyle.color}
        yAxisTextStyle={graphStyles.axisStyle}
      />

ISSUE

I am unable to see my tooltip when tapping on any datapoint focusedDataPointLabelComponent in this scenario. It was being shown in 1.4.10

Screenshot of the graph being created:

[Abhinandan-Kushwaha]

Hi @hamzafarooq-10P this is working for me. Please check this snack- https://snack.expo.dev/@ak_97/gnarly-red-bagel?platform=web