Tooltip not reflecting x-axis on `<BarStack />` components

[ianoc90]

Hi,

Seeing an issue with the tooltip in the <XYChart /> and I'd love some help getting to the bottom of it. When hovering over a bar stack, it doesn't seem to be picking up the correct nearestDatum meaning that whats displayed in the tooltip is not reflective of whats visible in the x-axis. There is also some strange behaviour around datumByKey where by not all the data is listed, making it difficult to display accurate information in the tooltip. I've put together a codesandbox to recreate the issue outside of our application code.

Thanks in advance for any help

Some examples:

Here I'm hovering over the 29th May, but nearestDatum is 5th June

---

12th June partially showing showing 26th June's Data

---

Data missing from 26th June

---

More data missing from 10th July

[ianoc90]

I've managed to get to the root cause of this issue. It stems from the findNearestStackDatum.ts here.

  const { xScale, yScale, point } = nearestDatumArgs;
  const datum = (horizontal ? findNearestDatumY : findNearestDatumX)(nearestDatumArgs);
  const seriesDatum = datum?.index == null ? null : seriesData[datum.index];

datum?.index is not always reliable as it calculated based on the index of the item within the context of its own series.

So take the following

<BarStack>
  <BarSeries
    data={[
      { label: "first", value: 1 },
      { label: "second", value: 2 },
      { label: "third", value: 3 },
    ]}
  />
  <BarSeries
    data={[
      { label: "first", value: 2 },
      { label: "second", value: 4 },
      { label: "third", value: 6 },
    ]}
  />
  ;
</BarStack>;

This works fine, because when you hover over "second" it corresponds to index 1 in all data series. But if we were to do the following (which I believe is a valid use case)

<BarStack>
  <BarSeries
    data={[
      { label: "first", value: 1 },
      { label: "second", value: 2 },
      { label: "third", value: 3 },
    ]}
  />
  <BarSeries
    data={[
      { label: "first", value: 2 },
      { label: "third", value: 6 },
    ]}
  />
</BarStack>;

then "second" will reference index 1 in one data series, but return the "third" in the other as thats what index 1 is.

There is an obvious fix here to just fixup the data but I think that we could make the lib code a little bit more reliable by finding based on the stack and not the index. I have a fix working on my local so happy to push a PR.

I've updated my codesandbox with a little bit more context

[ianoc90]

I've opened a PR for this issue, would be great to get some feedback on it

[eoinkilbride]

Hi folks, would appreciate feedback on this PR as this issue is causing major frustration. Thanks

[eoinkilbride]

Hi folks, following up on this, any update please? This is a major frustration for our customers so would be great to get it sorted ASAP