Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ianoc90 opened this issue Sep 2, 2024 · 3 comments · May be fixed by #1878
Open

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

ianoc90 opened this issue Sep 2, 2024 · 3 comments · May be fixed by #1878

Comments

@ianoc90
Copy link

ianoc90 commented Sep 2, 2024

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:

image

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


image

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


image

Data missing from 26th June


image

More data missing from 10th July

@ianoc90
Copy link
Author

ianoc90 commented Sep 10, 2024

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 added a commit to ianoc90/visx that referenced this issue Sep 12, 2024
@ianoc90 ianoc90 linked a pull request Sep 12, 2024 that will close this issue
@ianoc90
Copy link
Author

ianoc90 commented Sep 12, 2024

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

@eoinkilbride
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants