[xychart] Tooltip does not update when chart position changes

https://user-images.githubusercontent.com/1286001/103257155-2f4eda00-49e4-11eb-8eb9-0d98c701b96e.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?

[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! 😎

[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.