Adding tooltip to x axis on XY Chart

[dalyemmett]

Hi Guys,

I'm trying to add a tooltip to x-axis ticks.

I have tick labels that can be a really long string, which I truncate. Upon hover, I'd like to present the full label string in a tooltip.

I had seen this issue (#944) but I can't seem to reproduce the behaviour for an XYChart.

I've created a minimal working codesandbox here (https://codesandbox.io/s/aged-meadow-yl76j?file=/src/App.js:2018-2025).

Any ideas what I am doing wrong here?

[williaster]

Hey @dalyemmett 👋 thanks for checking out visx. I made a couple of tweaks to your example to get it working (updated sandbox)

• the xychart theme sets pointer-events: 'none' by default for tickLabels so your pointer events weren't getting triggered. I turned this off with tickLabelProps, but you could also set this at the theme level and pass the custom theme to XYChart
• after that, the tooltip was being positioned incorrectly. the demo in your link used a vanilla SVG text element, whereas you were using the @visx/text Text component. since text is a standard react element, the demo used ref directly, but the equivalent for Text is innerRef. without correctly setting containerRef, the TooltipInPortal doesn't know what parent element to use for positioning.

after those tweaks, it worked! 🎉 hope this helps and makes sense.

[dalyemmett]

@williaster Amazing. thank you very much. I was close!