Hi, I’m have created a line chart and now i want to add a hover event on the annotation text so that i can highlight the hovered line. normally, i can do it with the plotly_hover event but if i add hovermode: x unified it is not waorking correctly.
I think you should look for another option to make your label, first because with an annotation I don’t think you can make a label with all those styles and second because annotations do not have a hover event, I leave you this example using legends instead of annotations
If you want something more similar to what is in the image then I recommend that you use some div component that positions in the hover event
Hi, thanks for clearing it out. I’ll just stick with the hover event on lines then.
BY any change do you how to categorize lines based on a third value, like the one in the 3rd image(as the categorized in 15-17 and 5-14 years)
You only have click events in the annotations, according to the following description, if you activate the captureevents you could also capture the mouse movement but the truth is that I only found how to capture the click event
layout.annotations[]captureevents is “false” unless hovertext is provided. If you use the event plotly_clickannotation without hovertext you must explicitly enable captureevents.Checking a little more I found that setting the captureevents property to true of the annotation only activates the plotly_clickannotation event but there are no hover/unhover events, however the description of captureevents mentions that it activates the mouse events of the annotation and this is so that You can use another property of the annotation which is “hovertext” which shows a label with a text when passing over the annotation which can be styled with the “hoverlabel” property, however if what we are looking for is to have an event in that case we would have to add the following lines in the plotly.js file to have hover/unhover events on the annotations (The lines with ADD comment)
To quickly find that section, look for the word “plotly_clickannotation” in the file, it only appears once, you scroll down a little to find that section of the code and modify it
And finally you just add the following to capture the events and do what you have to do
layer.on("plotly_hoverannotation", data => {})
layer.on("plotly_unhoverannotation, data => {})
hi, sorry for the late reply. I was tring what you said with the javascript mouse event and somewhat it is working as expected but there are limitaion. Currently, I’m stucked in the placements of annotations when there are too many lines/when the axis contains character values and to highlight only the hovered annotation.
I’ll try to implement your soluntion also and will let u know/