[xychart] Tooltip does not update when chart position changes

[valtism]

Screen.Recording.2020-12-29.at.2.42.58.pm.mov

This behaviour happens when using visx in the react-grid-layout library. When the chart is moved, the x and y positions are not updated and the tooltip is displayed where the chart used to be. After a resize, the since the width prop has changed, the tooltip is rendered correctly.

I can work around this by passing the chart's X and Y position in as a prop, but I feel like this may be something that the library can solve automatically for me. Thoughts?

[VigneshTrantor]

Same issue here. I solved it by passing a key to the XY chart that changes based on the props.

[williaster]

Ah this is an interesting limitation. The XYChart tooltip is rendered inside of a React Portal and so is absolutely positioned on the page. This was intentional and can be very useful in various circumstances so that it's not clipped by any parent DOM elements of the chart (see z-index stacking context for more).

It's implemented with react-use-measure such that it will correct its position upon page scroll, but not if the parent element moves. I'd have to think about robust ways to detect this (open to ideas!), for now I'd suggest @VigneshTrantor 's workaround for force updating with a key change if you know the change happens.

[valtism]

This proved to be very difficult to handle, because even relying on changing props, it was difficult to get the x and y positions of my chart when they only update at the end of a drag, not at the end of a CSS-animated transition.

In my case, I couldn't work a solution. I just disable the tooltips when in an "edit mode" where charts can be moved, then re-enable them after that mode is exited and transitions are finished. Just leaving this here in for posterity.

[RIP21]

It also behaves like with reflows of the UI overall it seems. As on the first load of my page, I think I have for a 0.1ms a loading spinner, then it actually renders everything, and tooltips are around 300px off vertically (exactly the size of the elements that rendered above them) if I go to other route and return back in, so it renders without loading spinner (because of cache) everything aligns ok. Plus if I scroll.
Adding or removing ParentSize doesn't help. And, yeah, those graphs are in display: grid boxes. 4x4

As a workaround, I added this :)

  useEffect(() => {
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent('scroll'))
    }, 300)
  })

And it seems it fixes tooltips right after timeout triggers :)

[williaster]

Oof, yeah this sounds bad. Let me play around with an approach so lib consumers don't have to deal with this. Thanks for all the info 👍

[williaster]

Was exploring if IntersectionObserver could possibly solve this but not straight forward. One workaround that should fix it but isn't ideal perf-wise is force updating with <Tooltip key={Math.random()} ... />.

Another option would be to let users opt out of using the Portal-based tooltips.

[RIP21]

My hack above works perfectly. Unsure it's bad perf wise, but I don't see why it would be :) Probably for the use-case of issue creator, just calling this effect on after each drag and drop will do the trick.

As a side note, @williaster why you folks never enabled Github Discussions? It's a really nice place to ask questions while still non bloating issues with them. Highly recommend :) Love libs that have that section enabled.
I have quite a lot noob questions. Like how to make my AreaSeries fade down from solid color to fully transparent. Or how to make AreaSeries not look like a line if you have 10 records when X axis is dates and Y is a number value and all those 10 values are the same, so it's one tick and basically a line (looks ugly), I would want to have at least 2 ticks above and below added automatically :)
So, stupid questions maybe, but API docs are not super perfect nor D.TS helped me much TBH :) And graphs are hard if you're just FE dev and not Data Viz Engineer :)

[williaster]

@RIP21 great suggestion re discussions, it wasn't available for a while but looks like it is now. Just enabled it, so discuss away! 😎

[valtism]

We use the popper.js library to handle positioning while inside a portal. There is a react wrapper react-popper as well. May be too heavyweight, but it is a good candidate for consideration imo.