Best practices for tooltips on multi-layered charts

[elliooo]

Hi visx folks,

I'm trying to add tooltip support to a multi-layered chart (i.e. an absolutely-positioned line chart that sits above a bar chart): Discussion 1161's recommended answer.

Has anyone been able to create an example of working tooltips on a multi-layered chart, specifically by having a single TooltipProvider / EventProvider parent above both charts? For context, my JSX roughly follows this structure:

<div style={{ position: 'relative' }}>
  <TooltipProvider>
    <Bar width={1000} height={500} />
    <div style={{ position: ‘absolute’ }}>
      <Line width={1000} height={500} />
    </div>
   </TooltipProvider>
</div>

At the moment, 2 tooltips render on hover after placing TooltipProvider above both visualization, but the tooltip data only reflects the absolutely positioned line chart. Ideally, if my mouse is closer to the bar chart, the data in the rendered tooltip would be reflective of the bar chart underneath (apologies for the visual hiccups, just playing around with the idea before cleaning those up):

I definitely understand that this isn't an officially supported pattern, but wanted to reach out in case anyone was able to get this multi-layered chart pattern to work with tooltips.

Alternatively, any guidance on best practices towards achieve an ideal "multi-axis chart using visx" would be appreciated.

Cheers,
Elliot

Side note: visx has been an awesome componentized viz library. Excited to see its growth!

[williaster]

Sorry, don't have a ton of bandwidth to dive/troubleshoot in here. I haven't seen any examples of folks getting this to work but that doesn't mean they haven't. My stance is still that I don't think dual y-axis charts are worth it.

Throwing out an alternative that you might consider (that is easier to accurately interpret), which is linked tooltips. There's a sandbox demo of it under advanced usage in the xychart docs.

Also, glad you're enjoying visx overall, sorry this is a pain point.

[elliooo]

Thanks for clarifying @williaster. My team and I may consider a different approach instead of the dual y-axis concept; I appreciate the heads up.

Cheers!

[sawasawasawa]

@williaster Is there any option to make these charts different heights? I made a simple example with different chart heights and it has some issues https://codesandbox.io/p/sandbox/linked-tooltips-forked-vd9242

[sawasawasawa]

In case there is none yet, but you could guide me on the implementation a bit i'd be happy to contribute