Changing the background colour of a Graph

[andra.popescu]

Hi all,

I recently came across a situation where I want to update the background colour of a graph.

I have a Graph components and a Dropdown that I use to update the figure property of the Graph. Most of my figures have a gray background, however I need to change it to white for one of them.

The transition from the white to gray background works as expected, however, when I go from the gray background back to white, this doesn’t work.

I added a simplified code example below, as well as a gif showcasing the issue.

Has anyone come across this before? Is there a way to force the background to change colour?

Thanks!

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go


app = dash.Dash()

app.layout = html.Div([
    dcc.Dropdown(
        id='example-dropdown',
        options=[
            {'label': 'Data 1', 'value': 'data-1'},
            {'label': 'Data 2', 'value': 'data-2'},
        ],
        value='data-1',
    ),
    dcc.Graph(id='example-graph'),
])


@app.callback(dash.dependencies.Output('example-graph', 'figure'), [
    dash.dependencies.Input('example-dropdown', 'value'),
])
def update_graph(value):
    figure = go.Figure()
    if value == 'data-1':
        figure.add_traces(go.Sunburst(
            ids=['North America', 'Europe', 'Australia', 'North America - Football', 'Soccer', 'North America - Rugby', 'Europe - Football', 'Rugby'],
            labels=['North America', 'Europe', 'Australia', 'Football', 'Soccer', 'Rugby', 'Football', 'Rugby'],
            parents=['', '', '', 'North America', 'North America', 'North America', 'Europe', 'Europe'],
            values=[100, 100, 100, 33, 34, 33, 40, 20],
            outsidetextfont={'size': 20, 'color': '#377eb8'},
            leaf={'opacity': 0.4},
            marker={'line': {'width': 2}},
        ))
        figure.layout.plot_bgcolor = '#fff'
        figure.layout.paper_bgcolor = '#fff'
    elif value == 'data-2':
        figure.add_traces([
            {'x': [1, 2, 3], 'y': [2, 6, 2], 'type': 'bar', 'name': 'Set 1'},
            {'x': [1, 2, 3], 'y': [5, 3, 8], 'type': 'bar', 'name': 'Set 2'},
        ])
        figure.layout.plot_bgcolor = '#DCDCDC'
        figure.layout.paper_bgcolor = '#fff'
    return figure


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

[empet]

Hi @andra.popescu,

The plot_bgcolor is not updated for sunburst because fig.layout.plot_bgcolor='some_color_code' doesn’t work for a fig containing a sunburst.

I checked it with your example:

import plotly.graph_objs as go
fig = go.Figure()
fig.add_traces(go.Sunburst(
            ids=['North America', 'Europe', 'Australia', 'North America - Football', 'Soccer', 
                 'North America - Rugby', 'Europe - Football', 'Rugby'],
            labels=['North America', 'Europe', 'Australia', 'Football', 'Soccer',
                    'Rugby', 'Football', 'Rugby'],
            parents=['', '', '', 'North America', 'North America', 'North America', 'Europe', 'Europe'],
            values=[100, 100, 100, 33, 34, 33, 40, 20],
            outsidetextfont={'size': 20, 'color': '#377eb8'},
            leaf={'opacity': 0.4},
            marker={'line': {'width': 2}},
        ))
    
fig.update_layout(width=450, height=450, plot_bgcolor='rgb(10,10,10)')
fig.show()

The resulting figure has a white background although by my settings it should be black (almost black):

I ask @etienne to tell us whether this is a plotly.js issue or a sunburst was devised to accept only white plot_bgcolor.

[canbo]

Is there any update on this? I am facing a similar issue, when switching from a 2d scatter plot to a 3d surface.

[chriddyp]

@canbo - many of these issues should have been fixed. Can you upgrade dash and also share a simple, reproducable example?

[pengchuzhang]

I have the same problem, ```plot_bgcolor=…, does not change the background color. I have all updated plotly and dash.

[chriddyp]

@pengchuzhang- many of these issues should have been fixed. Can you share a simple, reproducable example?

[pengchuzhang]

May be it is my misunderstanding. For Sunburst, the plot background color may not be picked, if you do not define the colors for your data, Sunburst will pick up colors to distinguish the parents and children. paper_bgcolor works fine.

[canbo]

I opened issue #1107 . The example can be found there

[nicolaskruchten]

I’ve reproduced this in Plotly.js here https://github.com/plotly/plotly.js/issues/4807 and we’ll get it fixed

Update: it’s fixed now.

[mist]

Changing the background colour of a Graph

Hi @andra.popescu, The plot_bgcolor is not updated for sunburst because fig.layout.plot_bgcolor='some_color_code' doesn’t work for a fig containing a sunburst. I checked it with your example: import plotly.graph_objs as go fig = go.Figure() fig.add_traces(go.Sunburst( ids=['North America', 'Europe', 'Australia', 'North America - Football', 'Soccer', 'North America - Rugby', 'Europe - Football', 'Rugby'], labels=['North America', 'Europe', 'Australia',…

This code still have same issue on python version.