XYChart Tooltip decoupling from pointer events

[gschuager]

Hi, I'm trying to synchronize XYChart tooltips with tooltips in a 3rd party map component: when hovering the mouse over the chart, a tooltip in the corresponding position of the map should be displayed, and viceversa.
My idea is to use some external state (redux), dispatch an action on hover (from both the chart and the map) with the corresponding data point information (timestamp), and then to render the tooltips in both the chart and the map according to this shared state.

I see that I can use the XYChart onPointerMove prop to get the hovered timestamp, but how can I decouple the rendering of the XYChart Tooltip from the mouse events and instead do it based on the shared state?

[gschuager]

I set enableEvents to false in the corresponding LineSeries and that prevented the tooltip to be shown automatically.
Then I hooked onPointerMove in the XYChart component and made it to dispatch the corresponding store action.
Then I used showTooltip and hideTooltip from TooltipContext to programatically show/hide the tooltip based on a store selected.
Not sure if this is the best/correct way to accomplish this, but it seems to work ok.

[williaster]

Hey @gschuager looks like you possibly found a solution, but wanted to share this example which is linked from the advanced usage section of https://airbnb.io/visx/docs/xychart

XYChart is implemented with a handful of different contexs (theme context, data context [data and chart dimensions], event context, tooltip context, etc.). As a consumer you can bubble these providers up higher in your component tree in order to give other components access to the context state. This is an example of programmatic tooltip control using the TooltipProvider

https://codesandbox.io/s/programmatic-tooltips-hh7ly?file=/Example.tsx

Let me know if you have any follow questions!