plotly / dash

Data Apps & Dashboards for Python. No JavaScript Required.
https://plotly.com/dash
MIT License
21.19k stars 2.04k forks source link

Graph.figure.plot_bgcolor not updated with callback #1107

Open canbooo opened 4 years ago

canbooo commented 4 years ago

Describe your context My environment

dash                          1.8.0
dash-core-components          1.7.0
dash-html-components          1.0.2
dash-renderer                 1.2.3
dash-table                    4.6.0

My setup

- OS:  Windows 10
- Browser Firefox
- Version 72.0.2 (64-bit)

Describe the bug

Toggling between 2d and 3d scatter does not update plot_bgcolor as expected.

Expected behavior

When I am plotting 3d first, plot_bgcolor is set correctly. After switching to 2d and back to 3d, the plot_bgcolor of the 2d plot persists instead of getting overwritten by the plot_bgcolor of 3d.

Screenshots

Here is some code that replicates the error:

from itertools import product
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.DataFrame(product((1, -1), repeat=3), columns=["x", "y", "z"])
options = [{"value": f"{n}D", "label": f"{n}D"} for n in [2, 3]]
app.layout = html.Div([dcc.Graph(id='hypercube-plot', style={"width": "80vw", "height": "80vh"}),
                       html.Div(className='row', 
                                children=[html.Div([dcc.RadioItems(id="toggle-dims", options=options,
                                                                   value="3D")],
                                className='three columns')]
             )])

@app.callback(
    Output('hypercube-plot', 'figure'),
    [Input('toggle-dims', 'value')])
def display_hover_data(n_dim):
    if not n_dim:
        return {}
    try:
        n_dim = int(n_dim[0])
    except (ValueError, TypeError):
        return {}
    layout = dict(paper_bgcolor='#7f7f7f',
                  plot_bgcolor='#262626',)
    if n_dim == 2:
        data = [dict(type="scatter",
                     mode="markers",
                    x=df["x"],
                    y=df["y"],
                    color="white")]
        return {"data": data, "layout": layout}
    if n_dim != 3:
        return {}
    layout["plot_bgcolor"]='#7f7f7f'
    layout["scene"]=dict(xaxis={'title': {"backgroundcolor": "#262626"}},
                         yaxis={'title': {"backgroundcolor": "#262626"}},
                         zaxis={'title': {"backgroundcolor": "#262626"}})
    data = [dict(type="scatter3d",
                 mode="markers",
                x=df["x"],
                y=df["y"],
                z=df["z"],
                color="white")]
    return {"data": data, "layout": layout}

if __name__ == "__main__":
    app.run_server(debug=True)

I am attaching three screenshots too, where I toggle the dimensions. 1 2 3

canbooo commented 4 years ago

Just a quick update, that the issue has not been resolved with Dash 1.11. Does anyone have a suggestion as to where to look for the problem? I am not even sure, if dash or plotly is causing this.