Content
I’m working on a project using Plotly.js (version X.X.X) to display frequency data with peaks. I’m encountering an issue with the hover functionality when trying to select specific peaks on the graph.
Current Setup
Using Plotly.js with hovermode: ‘closest’
Graph displays frequency data with multiple peaks
Users need to select specific peaks for further analysis
Issue
When users try to hover over a specific peak, the selected point (indicated by the hover info) often doesn’t align precisely with the cursor position. This makes it difficult for users to select the exact peak they want, especially in dense areas of the graph.
Current Behavior
Hover selects the ‘closest’ point, but this isn’t always the point directly under the cursor
Users have to move the cursor around carefully to select the desired peak
The discrepancy between cursor position and selected point is noticeable and frustrating for users
Desired Behavior
More precise hovering, where the selected point aligns more closely with the cursor position
Easier selection of specific peaks, especially in dense areas of the graph
Question
Is there a way to improve the precision of the hover functionality in Plotly.js, particularly for selecting peaks?
Are there any configuration options or workarounds to make the hover selection more accurate?
If precise hovering is a limitation of Plotly.js, are there any recommended strategies to improve the user experience for peak selection?
Additional Information
We’re constrained to using Plotly.js for this project, so switching to a different library isn’t an option at this time.
Any solutions that can be implemented within Plotly.js or with minimal additional JavaScript would be ideal.
Thank you in advance for any insights or solutions you can provide!