Updating the trace type plotly figure

📊 Plotly Python
1

Hello everyone,

I would like to show a heatmap using dash plolty and updating the graph to a contour if the user wishes.

Is there a way to do it by using something like this fig.update_layout({“type”: “contour”})

Thanks,
^^

2

Hi @User5 ,

Welcome to the forum!

If you just wan to switch between contour and heatmap, no need to use Dash.
Try using dropdown menu to update Plotly chart attributes.
Here is the example:

import plotly.graph_objects as go

fig = go.Figure(data =
     go.Contour(
        z=[[10, 10.625, 12.5, 15.625, 20],
           [5.625, 6.25, 8.125, 11.25, 15.625],
           [2.5, 3.125, 5., 8.125, 12.5],
           [0.625, 1.25, 3.125, 6.25, 10.625],
           [0, 0.625, 2.5, 5.625, 10]],
    ))

# Add dropdown
fig.update_layout(
    updatemenus=[
        dict(
            buttons=list([
                dict(
                    args=["type", "contour"],
                    label="Contour",
                    method="restyle"
                ),
                dict(
                    args=["type", "heatmap"],
                    label="Heatmap",
                    method="restyle"
                )
            ]),
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.1,
            xanchor="left",
            y=1.14,
            yanchor="top"
        ),
    ]
)
fig.show()

visit here to get more example:

1 Like
3

Thank you for your welcome message and response.

But, I don’t want to use updatemenus. I want to use update_traces or udate_layout if possible.

4

Hi @User5 ,

I see, if you need to use Dash and I assume you use dcc.Dorpdown , try using fig.plotly_restyle inside callback function to change type attribute.

Here is the example:

from dash import Dash, dcc, html, Input, Output, callback
import plotly.graph_objects as go

app = Dash(__name__)

fig = go.Figure(data =
     go.Contour(
        z=[[10, 10.625, 12.5, 15.625, 20],
           [5.625, 6.25, 8.125, 11.25, 15.625],
           [2.5, 3.125, 5., 8.125, 12.5],
           [0.625, 1.25, 3.125, 6.25, 10.625],
           [0, 0.625, 2.5, 5.625, 10]],
    ))
app.layout = html.Div([
    dcc.Graph(figure=fig,id='graph-id'),
    dcc.Dropdown(
                ["contour","heatmap"],
                'contour',
                id='type-options'
            ),
])

@callback(
    Output('graph-id', 'figure'),
    Input('type-options', 'value'))
def update_figure(plot_type):
    fig.plotly_restyle({'type': plot_type}, 0)

    return fig

Useful link about plotly_restyle
https://plotly.github.io/plotly.py-docs/generated/plotly.html

5

It worked!
Thank you so much. :raised_hands:

1 Like