getPointerProps starts from 0 index, regardless of where you press and drag on the LineChart

[ThomasLVermeersch]

Description

I am trying to enable functionality similar to Robinhood's press and drag to view price functionality.

I made a request here - #934 that was fulfilled. However, I'm now facing an issue, where getPointerProps starts at 0, no matter where I begin the drag from.

For example, if I start my press at index 50, it shows data for index 50, but when I drag to the right, it jumps to 0, say I were to drag to 60, the data at the 10th index would show. Here is the experience:

Screen.Recording.2024-12-25.at.10.59.35.PM.mov

I was actually attempting to get this to work using focusEnabled prop before the latest gifted update, and was experiencing this issue, which made me think it was not possible at the time and is why I raised the request in the first place, so I suspect there might be some re-used logic in focusEnabled that is causing this in the latest update, although just a hunch.

My lineChart code is here:

The logic in getPointerProps just manages which values to use in a different component and should not play into the chart rendering at all. I have removed all of it and still face the same issue.

      <LineChart
        data={lineData}
        areaChart
        startOpacity={1}
        endOpacity={0}
        hideDataPoints
        xAxisLabelTextStyle={{ color: 'transparent' }} // Make labels invisible
        startFillColor={colorToUse}
        color={colorToUse}
        getPointerProps={(pointer: any) => {
          if (pointer.pointerX === 0) {
            if (chartData.lineData.length > 0) {
              setStockPrice(
                chartData.lineData[chartData.lineData.length - 1].value
              );
              setSelectedIndex(null);
              if(chartIsPressed){
                setChartIsPressed(false);
              }
            }
          } else if (pointer.pointerIndex !== selectedIndex) {
            setStockPrice(chartData.lineData[pointer.pointerIndex].value);
            setSelectedIndex(pointer.pointerIndex);
            if(!chartIsPressed){
              setChartIsPressed(true);
            }
          }
        }}
        showReferenceLine1
        referenceLine1Position={grantPrice}
        referenceLine1Config={{
          ...(lowestPrice && grantPrice >= lowestPrice
            ? {
                color: Colors.dark.lightGrey,
                labelText: `${new Intl.NumberFormat("en-US", {
                  style: "currency",
                  currency: "USD",
                }).format(Number(grantPrice))}`,
                labelTextStyle: {
                  color: Colors.dark.lightGrey,
                },
              }
            : {}),
        }}
        yAxisOffset={lowestPrice || 0}
        rulesColor="transparent"
        rulesType="solid"
        adjustToWidth
        width={Dimensions.get("window").width - 20}
        yAxisLabelWidth={0}
        initialSpacing={10}
        yAxisExtraHeight={10}
        disableScroll
        yAxisTextStyle={{ 
          color: Colors.dark.lightGrey,
        }}
        yAxisColor="transparent"
        xAxisColor="transparent"
        pointerConfig={{
          pointerStripColor:
            !selectedIndex || lineData[selectedIndex].value > grantPrice
              ? Colors.dark.stockGreen
              : Colors.dark.stockRed,
          pointerColor:
            !selectedIndex || lineData[selectedIndex].value > grantPrice
              ? Colors.dark.stockGreen
              : Colors.dark.stockRed,
        }}
      />

Any help would be greatly appreciated, thanks!

Steps to reproduce

Code and Video repro are above

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.47

React Native version

0.76.5

Platforms

iOS

Workflow

Expo Go

[Abhinandan-Kushwaha]

Thanks @ThomasLVermeersch for reporting it quickly. I will fix it and release a new version today.

[Abhinandan-Kushwaha]

@ThomasLVermeersch, Can you log the value of lineData and share it here?

[ThomasLVermeersch]

@Abhinandan-Kushwaha sure thing, thanks for the quick response. Truncated due to logging limitation, but most of the data is:

[ {
    "date": "2024-03-11",
    "value": 483.59,
    "label": "March 11, 24"
  },
  {
    "date": "2024-03-12",
    "value": 499.75,
    "label": "March 12, 24"
  },
  {
    "date": "2024-03-13",
    "value": 495.57,
    "label": "March 13, 24"
  },
  {
    "date": "2024-03-14",
    "value": 491.83,
    "label": "March 14, 24"
  },
  {
    "date": "2024-03-15",
    "value": 484.1,
    "label": "March 15, 24"
  },
  {
    "date": "2024-03-18",
    "value": 496.98,
    "label": "March 18, 24"
  },
  {
    "date": "2024-03-19",
    "value": 496.24,
    "label": "March 19, 24"
  },
  {
    "date": "2024-03-20",
    "value": 505.52,
    "label": "March 20, 24"
  },
  {
    "date": "2024-03-21",
    "value": 507.76,
    "label": "March 21, 24"
  },
  {
    "date": "2024-03-22",
    "value": 509.58,
    "label": "March 22, 24"
  },
  {
    "date": "2024-03-25",
    "value": 503.02,
    "label": "March 25, 24"
  },
  {
    "date": "2024-03-26",
    "value": 495.89,
    "label": "March 26, 24"
  },
  {
    "date": "2024-03-27",
    "value": 493.86,
    "label": "March 27, 24"
  },
  {
    "date": "2024-03-28",
    "value": 485.58,
    "label": "March 28, 24"
  },
  {
    "date": "2024-04-01",
    "value": 491.35,
    "label": "April 01, 24"
  },
  {
    "date": "2024-04-02",
    "value": 497.37,
    "label": "April 02, 24"
  },
  {
    "date": "2024-04-03",
    "value": 506.74,
    "label": "April 03, 24"
  },
  {
    "date": "2024-04-04",
    "value": 510.92,
    "label": "April 04, 24"
  },
  {
    "date": "2024-04-05",
    "value": 527.34,
    "label": "April 05, 24"
  },
  {
    "date": "2024-04-08",
    "value": 519.25,
    "label": "April 08, 24"
  },
  {
    "date": "2024-04-09",
    "value": 516.9,
    "label": "April 09, 24"
  },
  {
    "date": "2024-04-10",
    "value": 519.83,
    "label": "April 10, 24"
  },
  {
    "date": "2024-04-11",
    "value": 523.16,
    "label": "April 11, 24"
  },
  {
    "date": "2024-04-12",
    "value": 511.9,
    "label": "April 12, 24"
  },
  {
    "date": "2024-04-15",
    "value": 500.23,
    "label": "April 15, 24"
  },
  {
    "date": "2024-04-16",
    "value": 499.76,
    "label": "April 16, 24"
  },
  {
    "date": "2024-04-17",
    "value": 494.17,
    "label": "April 17, 24"
  },
  {
    "date": "2024-04-18",
    "value": 501.8,
    "label": "April 18, 24"
  },
  {
    "date": "2024-04-19",
    "value": 481.07,
    "label": "April 19, 24"
  },
  {
    "date": "2024-04-22",
    "value": 481.73,
    "label": "April 22, 24"
  },
  {
    "date": "2024-04-23",
    "value": 496.1,
    "label": "April 23, 24"
  },
  {
    "date": "2024-04-24",
    "value": 493.5,
    "label": "April 24, 24"
  },
  {
    "date": "2024-04-25",
    "value": 441.38,
    "label": "April 25, 24"
  },
  {
    "date": "2024-04-26",
    "value": 443.29,
    "label": "April 26, 24"
  },
  {
    "date": "2024-04-29",
    "value": 432.62,
    "label": "April 29, 24"
  },
  {
    "date": "2024-04-30",
    "value": 430.17,
    "label": "April 30, 24"
  },
  {
    "date": "2024-05-01",
    "value": 439.19,
    "label": "May 01, 24"
  },
  {
    "date": "2024-05-02",
    "value": 441.68,
    "label": "May 02, 24"
  },
  {
    "date": "2024-05-03",
    "value": 451.96,
    "label": "May 03, 24"
  },
  {
    "date": "2024-05-06",
    "value": 465.68,
    "label": "May 06, 24"
  },
  {
    "date": "2024-05-07",
    "value": 468.24,
    "label": "May 07, 24"
  },
  {
    "date": "2024-05-08",
    "value": 472.6,
    "label": "May 08, 24"
  },
  {
    "date": "2024-05-09",
    "value": 475.42,
    "label": "May 09, 24"
  },
  {
    "date": "2024-05-10",
    "value": 476.2,
    "label": "May 10, 24"
  },
  {
    "date": "2024-05-13",
    "value": 468.01,
    "label": "May 13, 24"
  },
  {
    "date": "2024-05-14",
    "value": 471.85,
    "label": "May 14, 24"
  },
  {
    "date": "2024-05-15",
    "value": 481.54,
    "label": "May 15, 24"
  },
  {
    "date": "2024-05-16",
    "value": 473.23,
    "label": "May 16, 24"
  },
  {
    "date": "2024-05-17",
    "value": 471.91,
    "label": "May 17, 24"
  },
  {
    "date": "2024-05-20",
    "value": 468.84,
    "label": "May 20, 24"
  },
  {
    "date": "2024-05-21",
    "value": 464.63,
    "label": "May 21, 24"
  },
  {
    "date": "2024-05-22",
    "value": 467.78,
    "label": "May 22, 24"
  },
  {
    "date": "2024-05-23",
    "value": 465.78,
    "label": "May 23, 24"
  },
  {
    "date": "2024-05-24",
    "value": 478.22,
    "label": "May 24, 24"
  },
  {
    "date": "2024-05-28",
    "value": 479.92,
    "label": "May 28, 24"
  },
  {
    "date": "2024-05-29",
    "value": 474.36,
    "label": "May 29, 24"
  },
  {
    "date": "2024-05-30",
    "value": 467.05,
    "label": "May 30, 24"
  },
  {
    "date": "2024-05-31",
    "value": 466.83,
    "label": "May 31, 24"
  },
  {
    "date": "2024-06-03",
    "value": 477.49,
    "label": "June 03, 24"
  },
  {
    "date": "2024-06-04",
    "value": 476.99,
    "label": "June 04, 24"
  },
  {
    "date": "2024-06-05",
    "value": 495.06,
    "label": "June 05, 24"
  },
  {
    "date": "2024-06-06",
    "value": 493.76,
    "label": "June 06, 24"
  },
  {
    "date": "2024-06-07",
    "value": 492.96,
    "label": "June 07, 24"
  },
  {
    "date": "2024-06-10",
    "value": 502.6,
    "label": "June 10, 24"
  },
  {
    "date": "2024-06-11",
    "value": 507.47,
    "label": "June 11, 24"
  },
  {
    "date": "2024-06-12",
    "value": 508.84,
    "label": "June 12, 24"
  },
  {
    "date": "2024-06-13",
    "value": 504.1,
    "label": "June 13, 24"
  },
  {
    "date": "2024-06-14",
    "value": 504.16,
    "label": "June 14, 24"
  },
  {
    "date": "2024-06-17",
    "value": 506.63,
    "label": "June 17, 24"
  },
  {
    "date": "2024-06-18",
    "value": 499.49,
    "label": "June 18, 24"
  },
  {
    "date": "2024-06-20",
    "value": 501.7,
    "label": "June 20, 24"
  },
  {
    "date": "2024-06-21",
    "value": 494.78,
    "label": "June 21, 24"
  },
  {
    "date": "2024-06-24",
    "value": 498.91,
    "label": "June 24, 24"
  },
  {
    "date": "2024-06-25",
    "value": 510.6,
    "label": "June 25, 24"
  },
  {
    "date": "2024-06-26",
    "value": 513.12,
    "label": "June 26, 24"
  },
  {
    "date": "2024-06-27",
    "value": 519.56,
    "label": "June 27, 24"
  },
  {
    "date": "2024-06-28",
    "value": 504.22,
    "label": "June 28, 24"
  },
  {
    "date": "2024-07-01",
    "value": 504.68,
    "label": "July 01, 24"
  },
  {
    "date": "2024-07-02",
    "value": 509.5,
    "label": "July 02, 24"
  },
  {
    "date": "2024-07-03",
    "value": 509.96,
    "label": "July 03, 24"
  },
  {
    "date": "2024-07-05",
    "value": 539.91,
    "label": "July 05, 24"
  },
  {
    "date": "2024-07-08",
    "value": 529.32,
    "label": "July 08, 24"
  },
  {
    "date": "2024-07-09",
    "value": 530,
    "label": "July 09, 24"
  },
  {
    "date": "2024-07-10",
    "value": 534.69,
    "label": "July 10, 24"
  },
  {
    "date": "2024-07-11",
    "value": 512.7,
    "label": "July 11, 24"
  },
  {
    "date": "2024-07-12",
    "value": 498.87,
    "label": "July 12, 24"
  },
  {
    "date": "2024-07-15",
    "value": 496.16,
    "label": "July 15, 24"
  },
  {
    "date": "2024-07-16",
    "value": 489.79,
    "label": "July 16, 24"
  },
  {
    "date": "2024-07-17",
    "value": 461.99,
    "label": "July 17, 24"
  },
  {
    "date": "2024-07-18",
    "value": 475.85,
    "label": "July 18, 24"
  },
  {
    "date": "2024-07-19",
    "value": 476.79,
    "label": "July 19, 24"
  },
  {
    "date": "2024-07-22",
    "value": 487.4,
    "label": "July 22, 24"
  },
  {
    "date": "2024-07-23",
    "value": 488.69,
    "label": "July 23, 24"
  },
  {
    "date": "2024-07-24",
    "value": 461.27,
    "label": "July 24, 24"
  },
  {
    "date": "2024-07-25",
    "value": 453.41,
    "label": "July 25, 24"
  },
  {
    "date": "2024-07-26",
    "value": 465.7,
    "label": "July 26, 24"
  },
  {
    "date": "2024-07-29",
    "value": 465.71,
    "label": "July 29, 24"
  },
  {
    "date": "2024-07-30",
    "value": 463.19,
    "label": "July 30, 24"
  },
  {
    "date": "2024-07-31",
    "value": 474.83,
    "label": "July 31, 24"
  },
  {
    "date": "2024-08-01",
    "value": 497.74,
    "label": "August 01, 24"
  },
  {
    "date": "2024-08-02",
    "value": 488.14,
    "label": "August 02, 24"
  },
  {
    "date": "2024-08-05",
    "value": 475.73,
    "label": "August 05, 24"
  },
  {
    "date": "2024-08-06",
    "value": 494.09,
    "label": "August 06, 24"
  },
  {
    "date": "2024-08-07",
    "value": 488.92,
    "label": "August 07, 24"
  },
  {
    "date": "2024-08-08",
    "value": 509.63,
    "label": "August 08, 24"
  },
  {
    "date": "2024-08-09",
    "value": 517.77,
    "label": "August 09, 24"
  },
  {
    "date": "2024-08-12",
    "value": 515.95,
    "label": "August 12, 24"
  },
  {
    "date": "2024-08-13",
    "value": 528.54,
    "label": "August 13, 24"
  },
  {
    "date": "2024-08-14",
    "value": 526.76,
    "label": "August 14, 24"
  },
  {
    "date": "2024-08-15",
    "value": 537.33,
    "label": "August 15, 24"
  },
  {
    "date": "2024-08-16",
    "value": 527.42,
    "label": "August 16, 24"
  },
  {
    "date": "2024-08-19",
    "value": 529.28,
    "label": "August 19, 24"
  },
  {
    "date": "2024-08-20",
    "value": 526.73,
    "label": "August 20, 24"
  },
  {
    "date": "2024-08-21",
    "value": 535.16,
    "label": "August 21, 24"
  },
  {
    "date": "2024-08-22",
    "value": 531.93,
    "label": "August 22, 24"
  },
  {
    "date": "2024-08-23",
    "value": 528,
    "label": "August 23, 24"
  },
  {
    "date": "2024-08-26",
    "value": 521.12,
    "label": "August 26, 24"
  },
  {
    "date": "2024-08-27",
    "value": 519.1,
    "label": "August 27, 24"
  },
  {
    "date": "2024-08-28",
    "value": 516.78,
    "label": "August 28, 24"
  },
  {
    "date": "2024-08-29",
    "value": 518.22,
    "label": "August 29, 24"
  },
  {
    "date": "2024-08-30",
    "value": 521.31,
    "label": "August 30, 24"
  },
  {
    "date": "2024-09-03",
    "value": 511.76,
    "label": "September 03, 24"
  },
  {
    "date": "2024-09-04",
    "value": 512.74,
    "label": "September 04, 24"
  },
  {
    "date": "2024-09-05",
    "value": 516.86,
    "label": "September 05, 24"
  },
  {
    "date": "2024-09-06",
    "value": 500.27,
    "label": "September 06, 24"
  },
  {
    "date": "2024-09-09",
    "value": 504.79,
    "label": "September 09, 24"
  },
  {
    "date": "2024-09-10",
    "value": 504.79,
    "label": "September 10, 24"
  },
  {
    "date": "2024-09-11",
    "value": 511.83,
    "label": "September 11, 24"
  },
  {
    "date": "2024-09-12",
    "value": 525.6,
    "label": "September 12, 24"
  },
  {
    "date": "2024-09-13",
    "value": 524.62,
    "label": "September 13, 24"
  },
  {
    "date": "2024-09-16",
    "value": 533.28,
    "label": "September 16, 24"
  },
  {
    "date": "2024-09-17",
    "value": 536.32,
    "label": "September 17, 24"
  },
  {
    "date": "2024-09-18",
    "value": 537.95,
    "label": "September 18, 24"
  },
  {
    "date": "2024-09-19",
    "value": 559.1,
    "label": "September 19, 24"
  },
  {
    "date": "2024-09-20",
    "value": 561.35,
    "label": "September 20, 24"
  },
  {
    "date": "2024-09-23",
    "value": 564.41,
    "label": "September 23, 24"
  },
  {
    "date": "2024-09-24",
    "value": 563.33,
    "label": "September 24, 24"
  },
  {
    "date": "2024-09-25",
    "value": 568.31,
    "label": "September 25, 24"
  },
  {
    "date": "2024-09-26",
    "value": 567.84,
    "label": "September 26, 24"
  },
  {
    "date": "2024-09-27",
    "value": 567.36,
    "label": "September 27, 24"
  },
  {
    "date": "2024-09-30",
    "value": 572.44,
    "label": "September 30, 24"
  },
  {
    "date": "2024-10-01",
    "value": 576.47,
    "label": "October 01, 24"
  },
  {
    "date": "2024-10-02",
    "value": 572.81,
    "label": "October 02, 24"
  },
  {
    "date": "2024-10-03",
    "value": 582.77,
    "label": "October 03, 24"
  },
  {
    "date": "2024-10-04",
    "value": 595.94,
    "label": "October 04, 24"
  },
  {
    "date": "2024-10-07",
    "value": 584.78,
    "label": "October 07, 24"
  },
  {
    "date": "2024-10-08",
    "value": 592.89,
    "label": "October 08, 24"
  },
  {
    "date": "2024-10-09",
    "value": 590.51,
    "label": "October 09, 24"
  },
  {
    "date": "2024-10-10",
    "value": 583.83,
    "label": "October 10, 24"
  },
  {
    "date": "2024-10-11",
    "value": 589.95,
    "label": "October 11, 24"
  },
  {
    "date": "2024-10-14",
    "value": 590.42,
    "label": "October 14, 24"
  },
  {
    "date": "2024-10-15",
    "value": 586.27,
    "label": "October 15, 24"
  },
  {
    "date": "2024-10-16",
    "value": 576.79,
    "label": "October 16, 24"
  },
  {
    "date": "2024-10-17",
    "value": 576.93,
    "label": "October 17, 24"
  },
  {
    "date": "2024-10-18",
    "value": 576.47,
    "label": "October 18, 24"
  },
  {
    "date": "2024-10-21",
    "value": 575.16,
    "label": "October 21, 24"
  },
  {
    "date": "2024-10-22",
    "value": 582.01,
    "label": "October 22, 24"
  },
  {
    "date": "2024-10-23",
    "value": 563.69,
    "label": "October 23, 24"
  },
  {
    "date": "2024-10-24",
    "value": 567.78,
    "label": "October 24, 24"
  },
  {
    "date": "2024-10-25",
    "value": 573.25,
    "label": "October 25, 24"
  },
  {
    "date": "2024-10-28",
    "value": 578.16,
    "label": "October 28, 24"
  },
  {
    "date": "2024-10-29",
    "value": 593.28,
    "label": "October 29, 24"
  },
  {
    "date": "2024-10-30",
    "value": 591.8,
    "label": "October 30, 24"
  },
  {
    "date": "2024-10-31",
    "value": 567.58,
    "label": "October 31, 24"
  },
  {
    "date": "2024-11-01",
    "value": 567.16,
    "label": "November 01, 24"
  },
  {
    "date": "2024-11-04",
    "value": 560.68,
    "label": "November 04, 24"
  },
  {
    "date": "2024-11-05",
    "value": 572.43,
    "label": "November 05, 24"
  },
  {
    "date": "2024-11-06",
    "value": 572.05,
    "label": "November 06, 24"
  },
  {
    "date": "2024-11-07",
    "value": 591.7,
    "label": "November 07, 24"
  },
  {
    "date": "2024-11-08",
    "value": 589.34,
    "label": "November 08, 24"
  },
  {
    "date": "2024-11-11",
    "value": 583.17,
    "label": "November 11, 24"
  },
  {
    "date": "2024-11-12",
    "value": 584.82,
    "label": "November 12, 24"
  },
  {
    "date": "2024-11-13",
    "value": 580,
    "label": "November 13, 24"
  },
  {
    "date": "2024-11-14",
    "value": 577.16,
    "label": "November 14, 24"
  },
  {
    "date": "2024-11-15",
    "value": 554.08,
    "label": "November 15, 24"
  },
  {
    "date": "2024-11-18",
    "value": 554.4,
    "label": "November 18, 24"
  },
  {
    "date": "2024-11-19",
    "value": 561.09,
    "label": "November 19, 24"
  },
  {
    "date": "2024-11-20",
    "value": 565.52,
    "label": "November 20, 24"
  },
  {
    "date": "2024-11-21",
    "value": 563.09,
    "label": "November 21, 24"
  },
  {
    "date": "2024-11-22",
    "value": 559.14,
    "label": "November 22, 24"
  },
  {
    "date": "2024-11-25",
    "value": 565.11,
    "label": "November 25, 24"
  },
  {
    "date": "2024-11-26",
    "value": 573.54,
    "label": "November 26, 24"
  },
  {
    "date": "2024-11-27",
    "value": 569.2,
    "label": "November 27, 24"
  },
  {
    "date": "2024-11-29",
    "value": 574.32,
    "label": "November 29, 24"
  },
  {
    "date": "2024-12-02",
    "value": 592.83,
    "label": "December 02, 24"
  },
  {
    "date": "2024-12-03",
    "value": 613.65,
    "label": "December 03, 24"
  },
  {
    "date": "2024-12-04",
    "value": 613.78,
    "label": "December 04, 24"
  },
  {
    "date": "2024-12-05",
    "value": 608.93,
    "label": "December 05, 24"
  },
  {
    "date": "2024-12-06",
    "value": 623.77,
    "label": "December 06, 24"
  },
  {
    "date": "2024-12-09",
    "value": 613.57,
    "label": "December 09, 24"
  },
  {
    "date": "2024-12-10",
    "value": 619.32,
    "label": "December 10, 24"
  },
  {
    "date": "2024-12-11",
    "value": 632.68,
    "label": "December 11, 24"
  },
  {
    "date": "2024-12-12",
    "value": 630.79,
    "label": "December 12, 24"
  },
  {
    "date": "2024-12-13",
    "value": 620.35,
    "label": "December 13, 24"
  },
  {
    "date": "2024-12-16",
    "value": 624.24,
    "label": "December 16, 24"
  },
  {
    "date": "2024-12-17",
    "value": 619.44,
    "label": "December 17, 24"
  },
  {
    "date": "2024-12-18",
    "value": 597.19,
    "label": "December 18, 24"
  },
  {
    "date": "2024-12-19",
    "value": 595.57,
    "label": "December 19, 24"
  },
  {
    "date": "2024-12-20",
    "value": 585.25,
    "label": "December 20, 24"
  },
  {
    "date": "2024-12-23",
    "value": 599.85,
    "label": "December 23, 24"
  },
  {
    "date": "2024-12-24",
    "value": 607.75,
    "label": "December 24, 24"
  }
]

[Abhinandan-Kushwaha]

@ThomasLVermeersch I just tested it and found that the issue occurs only on iOS and works fine on Android and the web.
Here's a snack where the code can be tested on all the 3 platforms- https://snack.expo.dev/@ak_97/thomos?platform=android

I have started fixing it, will update here once done.