Plotly responsive dropdown menu

Viewed 92

Is there a way to make the dropdown menus in Plotly responsive (whenever the screen size is decreased, the dropdown menus should reflect the change and shrink).

When I decrease the window size the boxes are displayed one on another, and some labels are shown and some are not shown: Dropdown menus are not responsive

here is a json file:

{
"Names": {
    "0": "Alice",
    "1": "Robert",
    "2": "Garry",
    "3": "Nate",
    "4": "Karen",
    "5": "Nick"
},
"Address": {
    "0": "21 Main St",
    "1": "19 Third St",
    "2": "4 Church St",
    "3": "5 High St",
    "4": "9 Elm St",
    "5": "06 Washingtom St"
},
"AreaCode": {
    "0": "777",
    "1": "421",
    "2": "768",
    "3": "345",
    "4": "888",
    "5": "123"
}}

here is a python code:

import pandas as pd
import plotly.graph_objects as go
import numpy as np


df_data = pd.read_json("test.json")


button_x_list = []
button_y_list = []
button_graphs_list = []

colnames = df_data.keys()

null_x = dict(
    method="update",
    label="",
    visible=True,
    args=[
        {"x": ["" for _ in range(len(df_data))]},
        {"xaxis": {"title": ""}},
    ],
)

null_y = dict(
    method="update",
    label="",
    visible=True,
    args=[
        {"y": ["" for _ in range(len(df_data))]},
        {"yaxis": {"title": ""}},
    ],
)

button_x_list.append(null_x)
button_y_list.append(null_y)

for col in colnames:
    button_x_list.append(
        dict(
            method="update",
            label=col,
            visible=True,
            args=[
                {"x": [df_data[col]]},
                {"xaxis": {"title": col}},
            ],
        )
    )

    button_y_list.append(
        dict(
            method="update",
            label=col,
            visible=True,
            args=[
                {"y": [df_data[col]]},
                {"yaxis": {"title": col}},
            ],
        )
    )


button_graphs_list.append(
    dict(args=["type", "scatter"], label="Bubble", method="restyle")
)
button_graphs_list.append(
    dict(args=["type", "bar"], label="Bar", method="restyle")
)
button_graphs_list.append(
    dict(args=["type", "pie"], label="Pie", method="restyle")
)
button_graphs_list.append(
    dict(args=["type", "histogram"], label="Histogram", method="restyle")
)
button_graphs_list.append(
    dict(args=["type", "box"], label="Box", method="restyle")
)



button_x_dict = dict(
    direction="down",
    showactive=True,
    xanchor="left",
    yanchor="top",
    visible=True,
    buttons=button_x_list,
    pad={"r": 15, "t": 10},
    x=0.03,
    y=1.08,
)

button_y_dict = dict(
    direction="down",
    showactive=True,
    xanchor="left",
    yanchor="top",
    visible=True,
    buttons=button_y_list,
    pad={"r": 15, "t": 10},
    x=0.23,
    y=1.08,
)

button_graphs_dict = dict(
    direction="down",
    showactive=True,
    xanchor="left",
    yanchor="top",
    visible=True,
    buttons=button_graphs_list,
    pad={"r": 15, "t": 10},
    x=0.46,
    y=1.08,
)

annotation_x = dict(
    text="X:",
    showarrow=False,
    x=0,
    y=1.05,
    xanchor="left",
    xref="paper",
    yref="paper",
    align="left",
    yanchor="top",
)
annotation_y = dict(
    text="Y:",
    showarrow=False,
    x=0.2,
    y=1.05,
    xanchor="left",
    xref="paper",
    yref="paper",
    align="left",
    yanchor="top",
)
annotation_graphs = dict(
   text="Graph:",
   showarrow=False,
   x=0.4,
   y=1.05,
   xanchor="left",
   xref="paper",
   yref="paper",
   align="left",
   yanchor="top",
)

fig = go.Figure(
    go.Scatter(x=pd.Series(dtype=object), y=pd.Series(dtype=object), mode="markers")
)

fig.update_layout(
    updatemenus=[button_x_dict, button_y_dict, button_graphs_dict],
    annotations=[annotation_x, annotation_y, annotation_graphs],
    title="Plotly Demo",
    xaxis={"title": ""},
    yaxis={"title": ""}
 )

 fig.show()
0 Answers
Related