Plotly with python - line chart deselect all

Question

I got a line chart, with multiple lines that represent sine waves with different frequencies.

I want to take a look at a specific wave, with all the rest out of the graph. I know that I can click, in the legend, on the lines I don't want to see and it will make them go away.

I was wondering if there is an interactive way to deselect all lines in one click, instead of clicking each one of them.

My code:

import numpy as np
import plotly.graph_objects as go

step = 1/1000
t = np.arange(0,1,step)    # time vector
trig_func = lambda ff : np.sin(2*np.pi*ff*t)

fig = go.Figure()

for freq in [1, 3, 5, 7]:
    y = trig_func(freq)
    fig.add_trace(go.Scatter(x=t, y=y, name=f"{freq} Hz"))

fig.show()

My graph:

Desired graph:

Synecology

Answer 1

You can double click the line in the legend

You can also set it so a line is not shown by default with visible = "legendonly" e.g.:

go.Scatter(x = data[x],
           y = data[y],
           visible = "legendonly")

Katar

This does not achieve what is asked. It just hides some legends by default. But the question here is how to make all legend items go away except the one that is clicked. – Viminal

@petar huh? this is a 1.5 year old accepted answer. my first sentence says how to hide all lines except for the desired line. which is to double click it's name in the legend. if you dont want something on the graph or in the legend just dont include it in your plotting function.... – Katar

I see what your answer does, however it is not what it is asked in the question! :) I am not saying it is incorrect, it is just not answer to the question. – Viminal

@petar what does double clicking a line in a plot not get you that the question wanted? Are you looking for help here? – Katar

he wanted to do it in ONE click. And yes, I actually am. The problem I face is the following: I have some points and I want to apply different color scheme depending on the color in the legend clicked. This can't be done in the standard way, because there is no straightforward way to dynamically set a property of the scatter with the legend. What I did is I added the same n points k times for each color, and then just use the legend to only show the one needed. So much overhead... – Viminal

That sounds like an interesting problem. I wonder if it would be possible to accomplish the same thing with plotly dash. Just make radio buttons that display the same data, in different colors. That would give you true one-click color changing – Katar

yup, this is exactly what I did. The best I can think of atm. Thank you! Have a nice day. – Viminal

I wonder if you can do the same from code (have some series hidden upon launching the plot but available for toggling in the legend) when using the plotly express api. E.g. px.line(pd.DataFrame(series, columns=series_names)) – Jeffrey

Answer 2

Before you show the figure, add this part:

fig.update_layout(dict(updatemenus=[
                        dict(
                            type = "buttons",
                            direction = "left",
                            buttons=list([
                                dict(
                                    args=["visible", "legendonly"],
                                    label="Deselect All",
                                    method="restyle"
                                ),
                                dict(
                                    args=["visible", True],
                                    label="Select All",
                                    method="restyle"
                                )
                            ]),
                            pad={"r": 10, "t": 10},
                            showactive=False,
                            x=1,
                            xanchor="right",
                            y=1.1,
                            yanchor="top"
                        ),
                    ]
              ))

This will add buttons to deselect and select all traces at once. It should look like this:

More on custom buttons in plotly: https://plotly.com/python/custom-buttons/

Tearful

reference: plotly.com/python/reference/layout/updatemenus – Jeffrey

Answer 3

It seems that double clicking a legend can deselect all legends now. I am testing the questioner's code in google colab. The plotly version is 5.5.0. The trick is that make sure the legend is selected before double click. And the double click need to be very fast, faster than normal.
After selecting single legend, you can also double click it to select all.

Gaeta

Yes, the double click needs to be much much faster than a regular one. I wonder if that can be relaxed through configuration. – Jeffrey

Answer 4

Not in one click, but this can be done by leveraging plotly's double click delay which will allow users to double click a line to select it at a normal pace instead of super fast as the plot defaults to.

import numpy as np
import plotly.graph_objects as go

config = {'doubleClickDelay': 1000}

step = 1/1000
t = np.arange(0,1,step)    # time vector
trig_func = lambda ff : np.sin(2*np.pi*ff*t)

fig = go.Figure()

for freq in [1, 3, 5, 7]:
    y = trig_func(freq)
    fig.add_trace(go.Scatter(x=t, y=y, name=f"{freq} Hz"))

fig.show(config=config)

Panier