Reversed x-axis changes back to original after button click

đź“Š Plotly Python
1

I am following the second plotly buttons example here: Update Several Data Attributes

However, I have added xaxis = dict(autorange="reversed") to the first fig.update_layout, because this is what I need to do in my case. The problem is, when I click the “Show Lines” button, the axis becomes un-reversed (back to original). My question, how to keep the axis reversed after the button click? Please let me know if anyone knows how to do this. I’m quite new to plotly so still trying to figure out how buttons work. Thank you!

See code below:

import plotly.graph_objects as go

import pandas as pd

# load dataset
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv")

# Create figure
fig = go.Figure()

# Add surface trace
fig.add_trace(go.Heatmap(z=df.values.tolist(), colorscale="Viridis"))

# Update plot sizing
fig.update_layout(
    width=800,
    height=900,
    autosize=False,
    margin=dict(t=100, b=0, l=0, r=0),
    xaxis = dict(autorange="reversed") # <--- This line is what I have added
)

# Update 3D scene options
fig.update_scenes(
    aspectratio=dict(x=1, y=1, z=0.7),
    aspectmode="manual"
)

# Add drowdowns
# button_layer_1_height = 1.08
button_layer_1_height = 1.12
button_layer_2_height = 1.065

fig.update_layout(
    updatemenus=[
        dict(
            buttons=list([
                dict(
                    args=["colorscale", "Viridis"],
                    label="Viridis",
                    method="restyle"
                ),
                dict(
                    args=["colorscale", "Cividis"],
                    label="Cividis",
                    method="restyle"
                ),
                dict(
                    args=["colorscale", "Blues"],
                    label="Blues",
                    method="restyle"
                ),
                dict(
                    args=["colorscale", "Greens"],
                    label="Greens",
                    method="restyle"
                ),
            ]),
            type = "buttons",
            direction="right",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.1,
            xanchor="left",
            y=button_layer_1_height,
            yanchor="top"
        ),
        dict(
            buttons=list([
                dict(
                    args=["reversescale", False],
                    label="False",
                    method="restyle"
                ),
                dict(
                    args=["reversescale", True],
                    label="True",
                    method="restyle"
                )
            ]),
            type = "buttons",
            direction="right",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.13,
            xanchor="left",
            y=button_layer_2_height,
            yanchor="top"
        ),
        dict(
            buttons=list([
                dict(
                    args=[{"contours.showlines": False, "type": "contour"}],
                    label="Hide lines",
                    method="restyle"
                ),
                dict(
                    args=[{"contours.showlines": True, "type": "contour"}],
                    label="Show lines",
                    method="restyle"
                ),
            ]),
            type = "buttons",
            direction="right",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.5,
            xanchor="left",
            y=button_layer_2_height,
            yanchor="top"
        ),
    ]
)

fig.update_layout(
    annotations=[
        dict(text="colorscale", x=0, xref="paper", y=1.1, yref="paper",
                             align="left", showarrow=False),
        dict(text="Reverse<br>Colorscale", x=0, xref="paper", y=1.06,
                             yref="paper", showarrow=False),
        dict(text="Lines", x=0.47, xref="paper", y=1.045, yref="paper",
                             showarrow=False)
    ])

fig.show()
2

Hi @astro_tt ,

Welcome to the community !

If you want to update xaxis properties , as far as I know yo should use relayout method or update method.

But the best that I can found, is by using update method.

By using update method, you need a couple of changes:

First, you should change for # Add surface trace.

Instead creating a heatmap plot, you should create 3 plots ( heatmap, countour without lines, countour with lines.

# Add surface trace
fig.add_trace(go.Contour(z=df.values.tolist(), colorscale="Viridis",contours=dict(showlines=True),visible=False))
fig.add_trace(go.Contour(z=df.values.tolist(), colorscale="Viridis",contours=dict(showlines=False),visible=False))
fig.add_trace(go.Heatmap(z=df.values.tolist(), colorscale="Viridis"))

Second, you need to change the Hide lines and Show lines drop down buttons into this:

...
buttons=list([
                dict(
                    args=[{"visible": [False,True,False]} ],
                    label="Hide lines",
                    method="update",
                ),
                dict(
                    args=[{"visible": [True,False,False]}],
                    label="Show lines",
                    method="update",
                    
                ),
            ]),
...

Change the method from restyle to update.
The visible attribute will show specific trace based on the index that has True value.

The Hide lines button will only show the second trace, which mean the Contour plot without lines.
The Show lines button will only show the first trace, which mean the Contour plot with lines.

Here the complete code:

import plotly.graph_objects as go

import pandas as pd

# load dataset
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv")

# Create figure
fig = go.Figure()

# Add surface trace
fig.add_trace(go.Contour(z=df.values.tolist(), colorscale="Viridis",contours=dict(showlines=True),visible=False))
fig.add_trace(go.Contour(z=df.values.tolist(), colorscale="Viridis",contours=dict(showlines=False),visible=False))
fig.add_trace(go.Heatmap(z=df.values.tolist(), colorscale="Viridis"))

# Update plot sizing
fig.update_layout(
    width=800,
    height=900,
    autosize=False,
    margin=dict(t=100, b=0, l=0, r=0),
    xaxis = dict(autorange="reversed") # <--- This line is what I have added
)

# Update 3D scene options
fig.update_scenes(
    aspectratio=dict(x=1, y=1, z=0.7),
    aspectmode="manual"
)

# Add drowdowns
# button_layer_1_height = 1.08
button_layer_1_height = 1.12
button_layer_2_height = 1.065

fig.update_layout(
    updatemenus=[
        dict(
            buttons=list([
                dict(
                    args=[{"colorscale": "Viridis"}],
                    label="Viridis",
                    method="restyle"
                ),
                dict(
                    args=[{"colorscale": "Cividis"}],
                    label="Cividis",
                    method="restyle"
                ),
                dict(
                    args=[{"colorscale": "Blues"}],
                    label="Blues",
                    method="restyle"
                ),
                dict(
                    args=[{"colorscale": "Greens"}],
                    label="Greens",
                    method="restyle"
                ),
            ]),
            type = "buttons",
            direction="right",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.1,
            xanchor="left",
            y=button_layer_1_height,
            yanchor="top"
        ),
        dict(
            buttons=list([
                dict(
                    args=[{"reversescale": False}],
                    label="False",
                    method="restyle"
                ),
                dict(
                    args=[{"reversescale": True}],
                    label="True",
                    method="restyle"
                )
            ]),
            type = "buttons",
            direction="right",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.13,
            xanchor="left",
            y=button_layer_2_height,
            yanchor="top"
        ),
        dict(
            buttons=list([
                dict(
                    args=[{"visible": [False,True,False]} ],
                    label="Hide lines",
                    method="update",
                ),
                dict(
                    args=[{"visible": [True,False,False]}],
                    label="Show lines",
                    method="update",
                    
                ),
            ]),
            type = "buttons",
            direction="right",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.5,
            xanchor="left",
            y=button_layer_2_height,
            yanchor="top"
        ),
    ]
)

fig.update_layout(
    annotations=[
        dict(text="colorscale", x=0, xref="paper", y=1.1, yref="paper",
                             align="left", showarrow=False),
        dict(text="Reverse<br>Colorscale", x=0, xref="paper", y=1.06,
                             yref="paper", showarrow=False),
        dict(text="Lines", x=0.47, xref="paper", y=1.045, yref="paper",
                             showarrow=False)
    ])

fig.show()