plotly / plotly/react-plotly.js
Tooltip misaligned when using global data object, layout prop and onHover that manipulates state
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 138
- Avg merge
- 3d 2h
- Merged PRs (30d)
- 4
Description
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
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the linked CodeSandbox with the listed plotly.js and react-plotly.js versions, then reproduce the misalignment by hovering a point while the custom onHover updates state. Trace the Plot component’s handling of the global data object, layout prop, and rerender. Done means the tooltip appears correctly and the remaining points stay aligned after the state update.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100