Timeline plot, is it possible to highlight bar on hover

[Peilin]

Is it possible to make a timeline plot in such a way that, initially all bars have a gray color, and when you hover over a bar, the bars that are of the same type are then highlighted with a yellow color, for example?

So in the screenshot example, all bars would be gray, and when the user hovers on one of the ‘Sleep’ bars, all the bars that belong to ‘Sleep’ are highlighted, and the rest remain grayed. Is it possible to achieve this effect?

[AIMPED]

Hi @Peilin I don’t think there is a way to do so in plotly, if you are open to use dash, there might be an solution.

Maybe helpful:

Select whole column(bar) in stacked bar chart

Hi @Hikari, actually what you are asking for should be an easy task. Because of that, my solution feels wrong: can it really be that complicated to achieve what you want to do? Anyways, a complicated solution might be preferable over no sloution at all, so here it comes: I use the click event to get the information, which column has been clicked (clicked_point) and use this information for “selecting” all traces at the clicked point. The code: from dash import Dash, html, dcc, Input, Output,…

[Peilin]

Oh yeah, certainly; I was actually using Dash. My bad posting in the wrong category! I will check out the link, thanks!

[Peilin]

Thanks for the link, I’m getting somewhere and quite close to what I wanted to achieve! I need a minor alternation but can’t seem to get it right. The data returned the following when I clicked on the first column (the ‘gold’ column):

{'points': [{'curveNumber': 2, 'pointNumber': 0, 'pointIndex': 0, 'x': 'gold', 'y': 9, 'label': 'gold', 'value': 9, 'bbox': {'x0': 147.03, 'x1': 619.3, 'y0': 83.5, 'y1': 83.5}}]}
{'points': [{'curveNumber': 1, 'pointNumber': 0, 'pointIndex': 0, 'x': 'gold', 'y': 10, 'label': 'gold', 'value': 10, 'bbox': {'x0': 147.03, 'x1': 619.3, 'y0': 145.14, 'y1': 145.14}}]}
{'points': [{'curveNumber': 0, 'pointNumber': 0, 'pointIndex': 0, 'x': 'gold', 'y': 24, 'label': 'gold', 'value': 24, 'bbox': {'x0': 147.03, 'x1': 619.3, 'y0': 213.63, 'y1': 213.63}}]}

I would actually want to retrieve the curveNumber and highlight just that; I was able to do with clicked_point = data["points"][0]["curveNumber"] to retrieve it, but unsure how to use it. So if I clicked on the ‘blue’ bar, then only the ‘blue’ bar is selected, so imagine that there is the same blue bar on the top again (above the green one), then only these two ‘blue’ bars are selected, the ‘green’ and ‘red’ are unselected.

Is there another parameter that I can call here instead of selectedpoints, used in trace.update({'selectedpoints': [clicked_point]}) , in order to achieve what I described? If it was not clear enough, I can try to provide some sample code!

[Peilin]

I managed/settled with changing the opacity property with the help of this thread figure['data'][curveNumber]['line']['color'] = "#FFF555" # new color
Referencing/Updating Trace by Curve Number

I think changing color may be a bit more tricky since I probably need to record the original color and refer back to it every time I click on a bar. So, for now I went with opacity.

        curveNumber = data["points"][0]['curveNumber']
        traces = current_figure['data']

        for t in range(len(traces)):
            if t == curveNumber:
                current_figure['data'][t]['marker']['opacity'] = 1  # new color
            else:
                current_figure['data'][t]['marker']['opacity'] = 0.1

Next, I will have to look into applying this effect only on the subplot that I am interacting with. Since the figure has several subplots, this makes all bars in all subplots 0.1 opacity; but I would rather that it only affects the subplot that I clicked the bar. Is that possible?