Dash Bootstrap Components - DropdownMenu Value

Dash Python
12

You have to just fiddle around with the layout properties of the Plotly figure object you’re creating. You can find out the color codes Superhero is using by looking at the uncompiled SCSS, or the compiled CSS.

Here’s a little demo I just tried out. For the plot background color there wasn’t an obvious choice, so I chose white with 10% opacity which has the effect of slightly lightening the background color.

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import plotly.graph_objs as go

data = [
    go.Scatter(
        x=[1, 2, 3, 4, 5], y=[4, 1, 2, 5, 2], marker={"color": "#DF691A"}
    )
]

layout = {
    "paper_bgcolor": "#2B3E50",
    "plot_bgcolor": "rgba(1.0, 1.0, 1.0, 0.1)",
    "title": "A superhero plot",
    "titlefont": {"color": "#FFF"},
    "xaxis": {"tickfont": {"color": "#FFF"}},
    "yaxis": {"tickfont": {"color": "#FFF"}},
}

fig = go.Figure(data=data, layout=layout)

app = dash.Dash(external_stylesheets=[dbc.themes.SUPERHERO])

app.layout = dbc.Container(dcc.Graph(figure=fig), className="p-5")

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

image
image.png2100×1016 84 KB