Axis Data Swap by buttons, plotly.graph_objects

📊 Plotly Python
1

i am trying to provide a button for switching between the axis for a 2D histogram Chart with the help of updatemenu as

Driver code is :

self._chartFigure.update_layout(
            updatemenus=[
                super().reverse_colorScale(self),
                super().reverse_axis(self,
                                     x=self._chartTypeObject.__getitem__("y"),
                                     y=self._chartTypeObject.__getitem__("x"))
            ])

I tried this code: but it’s not rendering anything after a click , so not sure whether it’s possible or not

def reverse_axis(self, x, y):
    return dict(
        buttons=list([
            dict(args=[{"x": y, "y": x, "xbin.size": 0.2, "xbin.start": 0,"ybins.size": 1, "ybins.start": 0}],
                 label="Switch X to Y",
                 method="restyle"
                 ),
            dict(args=[{"x": x, "y": y,"xbin.size": 1, "xbin.start": 0, "ybins.size": 0.2, "ybins.start": 0}],
                 label="Switch Y to X",
                 method="update"
                 )
        ]),
        type="dropdown",
        direction="right",
        showactive=True,
        x=0.13,
        y=1.065,
        xanchor="center",
        yanchor="bottom"
    )

Before Click :

Before Click
Before Click1892×491

Ater Click :

Ater Click
Ater Click1879×469

2

Hi @vikramadhav,
Welcome to Plotly forum!
Your plot is not displayed because the new “x” and “y” are incorrectly updated. To understand why, please
read this tutorial on the restyle method, here: https://plotly.com/~empet/15607.

This is a working example:

import plotly.graph_objects as go
import numpy as np

mean = [0, 0]
cov = [[1.6, -0.6], [-0.6, 0.8]]
x, y = np.random.multivariate_normal(mean, cov, 500).T

fig = go.Figure(go.Histogram2d(x=x,y=y, colorscale='Viridis',
                               xbins_start=-3.8, xbins_size=0.25, xbins_end=3.8,
                               ybins_start=-2.7, ybins_size=0.22, ybins_end=2.7))
fig.update_layout(width=550,height=480)                               

button1 =dict(args=[{"x":[ list(y)], "y": [list(x)], 
                     "xbins.size": 0.22, "xbins.start": -2.7, "xbins.end":2.7,
                     "ybins.size": 0.25, "ybins.start": -3.8, "ybins.end":3.8}],
                 label="Switch X to Y",
                 method="restyle"
                 )
button2=   dict(args=[{"x": [list(x)], "y": [list(y)],
                       "xbin.size": 0.25, "xbin.start": -3,"xbins.end":3,
                       "ybins.size": 0.22, "ybins.start": -2.7, "ybins.end":2.7}],
                 label="Switch Y to X",
                 method="restyle"
                 )

fig.update_layout(updatemenus=[dict(active=1,
                                    buttons=[button1, button2],
                                    x=0.13,
                                    y=1.065,
                                    xanchor="center",
                                    yanchor="bottom")
                              ])
1 Like
3

Hi @empet , Thanks for the direction, let me update the changes in my code.

4

@empet is it possible to have a combo box instead of buttons or dropdown of buttons, where drop-down can be populated by the data source. I know this can be done by Dash Callbacks but that altogether different implementation.