Black Lives Matter. Please consider donating to Black Girls Code today.

Restyling all subplots

Can we restyle all subplots in a given figure?
Currenlty, only one (sub)plot is restyled.

Example

 for scenario, trace in traces.items():
            _heatmap = go.Heatmap(z=trace["z"], zmin=cmin, zmax=cmax, showscale=showscale)
            showscale = False
            fig_full.add_trace(_heatmap, row=trace["row"], col=trace["col"])
            fig = go.Figure(data=[_heatmap])
            fig.update_yaxes(autorange="reversed")
            fig.write_html(F"heatmap_{scenario}.html")

        fig_full.update_yaxes(autorange="reversed")

        fig_full.update_layout(
            yaxis=dict(scaleanchor="x", scaleratio=1),
            yaxis2=dict(scaleanchor="x2", scaleratio=1),
            yaxis3=dict(scaleanchor="x3", scaleratio=1),
            yaxis4=dict(scaleanchor="x4", scaleratio=1),
        )

        # Add dropdown
        fig_full.update_layout(
            updatemenus=[
                dict(
                    type="buttons",
                    direction="left",
                    buttons=list([
                        dict(
                            args=["type", "surface"],
                            label="3D Surface",
                            method="restyle"
                        ),
                        dict(
                            args=["type", "heatmap"],
                            label="Heatmap",
                            method="restyle"
                        )
                    ]),
                    pad={"r": 10, "t": 10},
                    showactive=True,
                    x=0.11,
                    xanchor="left",
                    y=1.1,
                    yanchor="top"
                ),
            ]
        )

        fig_full.write_html(F"heatmap_all.html")

Hi @GillesC
Welcome to plotly forum!

You can restyle/update the subplots, too.
Suppose that your fig.data contains 4 traces, fig.data[0], fig.data[1], fig.data[2], fig.data[3].

A button should be defined as follows:

{'method': 'restyle', #or 'update'
 'args': [{here modify data or data attributes },
          {here modify layout attributes when method is update},
          {'traces': [0,2]}],
'label': 'Your label'
}

The first dict in the list corresponding to args is supposed to contain data or data attributes updates
in the traces [0,2].

If you had given more details about the trace type in
each subplot and what you want to change in each of them, I could have posted an example.

1 Like

Hi,
Thank you for your swift response!
The trace types were shown in the code

_heatmap = go.Heatmap(z=trace["z"], zmin=cmin, zmax=cmax, showscale=showscale)
fig_full.add_trace(_heatmap, row=trace["row"], col=trace["col"])

I wanted to change the subplots (heatmaps) between heatmaps and surface plots.

@GillesC

Theoretically the code for simultaneous restyling of plots in each subplot, should be defined as follows:

import plotly.graph_objects as go
from  plotly.subplots import make_subplots
import pandas as pd
import numpy as np

fig = make_subplots(rows=2, cols=1,  vertical_spacing=0.03,
                   specs=[[{"type": "scene"}], [{"type": "scene"}]])
z0 = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv')

fig.add_trace(go.Surface(z=z0.values,  colorscale='deep_r',  showscale=False), 1, 1)
x = np.linspace(-np.pi/2, np.pi/2, 50)
x, y = np.meshgrid(x,x)
z1 = -np.sin(x*y)

fig.add_trace(go.Surface(z=z1, colorscale='matter', showscale=False), 2, 1)
fig.update_layout(width=800, height=900);

fig.update_layout(
    updatemenus=[
        dict(
            buttons=[
                dict(
                    args=[{"type": ["surface", "surface"]}, 
                           {'traces': [0,1]}], #restyle both fig.data[0], fig.data[1] to "surface"
                    label="3D Surface",
                    method="restyle"
                ),
                dict(
                    args=[{"type": ["heatmap", "heatmap"]}, 
                           {'traces': [0, 1]}],  #restyle both fig.data[0], fig.data[1] to "heatmap"
                    label="Heatmap",
                    method="restyle"
                ),
                
            ],
            #direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=1,
            xanchor="left",
            y=1,
            yanchor="top"
        )
    ]
)
fig.show()

but there is a bug connected with this one https://github.com/plotly/plotly.js/issues/4596, and this one https://github.com/plotly/plotly.js/issues/4651, namely something goes wrong when mapping the indices from traces to the the corresponding indices in fig.data.

When this issue will be fixed, the above code should work.