`vline` and `hline` visibility not updated by custom buttons

[Squirrelson]

Hello,

Summary

Visibility of vline and hline objects do not update through custom buttons as expected. When working with custom buttons, the user can control the visibility for most traces through a list in the button dictionary. However this will not update the visibility of traces added through fig.add_vline or fig.add_hline.

Example

This example is a modification of one in the documentation. We expect the horizontal line to be visible unless the user selects None, and the vertical line to be visible when the user selects Both.

import plotly.graph_objects as go

import pandas as pd

# Load dataset
df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
df.columns = [col.replace("AAPL.", "") for col in df.columns]

# Initialize figure
fig = go.Figure()

# Add Traces

fig.add_trace(
    go.Scatter(x=list(df.Date),
               y=list(df.High),
               name="High",
               line=dict(color="#33CFA5")))

fig.add_trace(
    go.Scatter(x=list(df.Date),
               y=[df.High.mean()] * len(df.index),
               name="High Average",
               visible=False,
               line=dict(color="#33CFA5", dash="dash")))

fig.add_trace(
    go.Scatter(x=list(df.Date),
               y=list(df.Low),
               name="Low",
               line=dict(color="#F06A6A")))

fig.add_trace(
    go.Scatter(x=list(df.Date),
               y=[df.Low.mean()] * len(df.index),
               name="Low Average",
               visible=False,
               line=dict(color="#F06A6A", dash="dash")))

fig.add_hline(
    y=100,
    visible=True
)

fig.add_vline(
    x="2016-01-01",
    visible=False
)

fig.update_layout(
    updatemenus=[
        dict(
            active=0,
            buttons=list([
                dict(label="None",
                     method="update",
                     args=[{"visible": [True, False, True, False, False, False]},
                           {"title": "Yahoo"}]),
                dict(label="Both",
                     method="update",
                     args=[{"visible": [True, True, True, True, True, True]},
                           {"title": "Yahoo"}]),
            ]),
        )
    ])

# Set title
fig.update_layout(title_text="Yahoo")

fig.show()

Despite seemingly setting visibility for the vertical line and horizontal line in the button dictionary, the horizontal line remains visible and vertical line not visible regardless of button selected. See relevant image of example below:

Speculation

Upon further inspection, it appears this is because fig.add_vline and fig.add_hline are adding shapes, which behave differently to standard traces. Therefore updating these requires defining the shapes in the custom buttons rather than adding them to the figure and then attempting to control visibility. The below example achieves the intended behaviour.

import plotly.graph_objects as go

import pandas as pd

# Load dataset
df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
df.columns = [col.replace("AAPL.", "") for col in df.columns]

# Initialize figure
fig = go.Figure()

# Add Traces

fig.add_trace(
    go.Scatter(x=list(df.Date),
               y=list(df.High),
               name="High",
               line=dict(color="#33CFA5")))

fig.add_trace(
    go.Scatter(x=list(df.Date),
               y=[df.High.mean()] * len(df.index),
               name="High Average",
               visible=False,
               line=dict(color="#33CFA5", dash="dash")))

fig.add_trace(
    go.Scatter(x=list(df.Date),
               y=list(df.Low),
               name="Low",
               line=dict(color="#F06A6A")))

fig.add_trace(
    go.Scatter(x=list(df.Date),
               y=[df.Low.mean()] * len(df.index),
               name="Low Average",
               visible=False,
               line=dict(color="#F06A6A", dash="dash")))

# fig.add_hline(
#     y=100,
#     visible=False
# )

# fig.add_vline(
#     x="2016-01-01",
#     visible=False
# )

fig.update_layout(
    updatemenus=[
        dict(
            active=0,
            buttons=list([
                dict(label="None",
                     method="update",
                     args=[{"visible": [True, False, True, False]},
                           {"title": "Yahoo",
                            "shapes": []}]),
                dict(label="Both",
                     method="update",
                     args=[{"visible": [True, True, True, True]},
                           {"title": "Yahoo",
                            "shapes": [
                                {'type': 'line',
                                'visible': True,
                                'x0': 0,
                                'x1': 1,
                                'xref': 'x domain',
                                'y0': 100,
                                'y1': 100,
                                'yref': 'y'},
                                {'type': 'line',
                                'visible': True,
                                'x0': '2016-01-01',
                                'x1': '2016-01-01',
                                'xref': 'x',
                                'y0': 0,
                                'y1': 1,
                                'yref': 'y domain'}
                            ]
                        }]),
            ]),
        )
    ])

# Set title
fig.update_layout(title_text="Yahoo")

fig.show()

If this is the case, it could be better documented. While the existing documentation suggests this behaviour for annotations, it seems reasonable to expect lines to behave more like traces than annotations, particularly because they do take a visible argument. Maybe it would be best to update the documentation for this yahoo example to show averages using a shape (as shown in the code above), rather than a trace.

Happy to help improve the documentation if this appears to be the best approach. Sorry if this has already been reported earlier.

Thanks!

[gvwilson]

thanks for the detailed report @Squirrelson - I'll tag @LiamConnors and yes, if you'd like to submit a documentation PR we would be very grateful. Cheers - @gvwilson