✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Show single markers in traces on hover

Hi,
is it possible to show only a specific marker on a trace? I have disabled the annotations on hover. (hoverinfo: 'none')

If I hover about the plot, I want to show markers for the currently hovered x-value. I have created a jsFiddle-Example for that. With the plotly_hover-Event I get the Points related to the x-value. But how I can say plotly, that it should show a single marker for each y-point of this.
The same for plotly_unhover-Event: How can I hide the marker If I leave the associated x-value with my cursor.

https://jsfiddle.net/sbxjb9ko/

Desired Behaviour in the example: If I hover with the cursor in the area of the x=2 value, I want that plotly shows a marker for the 50 and 4 of the both lines “data1” and “data”. In contrast on hover x=1 value, it should only show the marker for the “data1” trace on 40.

1 Like

I think setting layout.hovermode: 'closest' would give the desired result.

Thank you for your answer. I think the usage of layout.hovermode: 'closest' not solve my problem.
Here is a LineChart that does the desired result.
It shows a vertical line that hits all lines on hover over the plot AND show a bubble (marker) for the relevant measure points to the related x-value.

So my question is: Is there a way to show a marker/bubble in the same way with plotly?

A workaround is to set trace opacity to 0, change y-axis range, and optionally expand bar size (if you are using bar graph of course).

Is the desired hover-effect now possible in 2018? Seems that the thread got a bit forgotten.

2 Likes

Hi, is this possible in 2020? Does anyone have an idea how to solve it?