Tooltip misaligned when using global data object, layout prop and onHover that manipulates state

[stillesjo]

The tooltip hover functionality gets messed up when the following conditions are met:

• You got your own data object which isn't reinitialized every time the plot is rendered.
• You have declared a custom onHover function
• You update state to get the component to re-render
• You have defined the layout property in the Plot component

This sandbox reproduces the error https://codesandbox.io/s/qx5qr2m5x4

Hover one of the points in the plot. The tooltip will be shown briefly and afterwards the rest of the points will be misaligned towards the axes.

Versions used: plotly.js 1.37.1 react-plotly.js 2.2.0

Tested on: chrome edge

[stillesjo]

It seems like it has to do with updating state without updating the data object or datarevision (that can be set in the layout property).

In the following example we cause the error by setting state to the same as before, but updating the object reference to cause a re-rendering. The plot will be re-rendered with the same properties as before.

The other button does the same thing but also increases the layout.datarevision number which is used in the render function.

https://codesandbox.io/s/ly2988yn9l

[hidai]

I'm facing the same issue. Data can be plotted properly with autorange, however plotly thinks X and Y ranges are [0, 5] regardless of the autorange results and [0, 5] is used for drawing tooltips. Once I stop using autorange, the problem disappears.

[yb]

I faced the same problem, and I noticed this issue has existed for 3 years. Is there any solution? Thanks I tried the revision and layout.datarevision properties but it didn't solve the problem.