Tooltip positioning on a scaled <div style={{ transform: 'scale(2)' }} />

[andresgutgon]

What?

When a chart is inside a div that is scaled tooltip positioning is not correct.

<div style={{ transform: 'scale(2)' }}>
  <MyFancyNivoChart />
</div>

Look at the end how the cursors doesn't correspond with the Mesh that I put in debug mode 👀

zoom-chart.mp4

Describe the solution you'd like

I made a PR with it #2034

Describe alternatives you've considered

The thing is that event position is not calculated ok inside an scaled div. The alternative is to find the scaling factor to calculate position

Additional context

This is the canvas lib I'm using as you can see the nodes can be zoom-in/zoom-out

Thanks

Thanks a lot for Nivo. It's awesome and super well documented. 🙌

[andresgutgon]

Closing because the PR was merged 🎉 Thank @plouc

[andresgutgon]

Hi, @plouc sorry to bother you 🙏 . Maybe it's explained somewhere but I don't find it.
What's the release cycle for changes in Nivo packages? When would be next release?

[plouc]

@andresgutgon, no problem, there's no real release cycle, it depends pretty much on the time I can find to work on the project. I've released this fix in 0.80.0, but I missed something, it fixes getRelativeCursor for SVG based implementations but all canvas implementations are broken due to this, as it uses getBBox, which is only available for SVG elements, I'm trying to fix that.

[andresgutgon]

Shit : / Sorry for that. We don't use any canvas chart and I missed that

[andresgutgon]

Oh! I just saw you fixed it #2125 🙌