Layout is not working in Treemap

📊 Plotly Python
1

Hi. Could you help me with this problem?. Thank you.
The treemap works if we don’t use the layout ,We tried other library but it seems the problem with just treemap. We need to use different layout template like plotly_dark

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
bggolor = '#24252A'
default_layout = {
    'margin': {'r': 5, 't': 20, 'l': 5, 'b': 30},
    'paper_bgcolor': bggolor,
    'plot_bgcolor': bggolor,
}

fig = go.Figure(go.Treemap(

    labels = ["Eve","Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],

    parents = ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"]

))

layout= go.Layout(
                    **default_layout,
                    template='plotly_dark',
                    )

figure = {
    'data': fig,
    'layout': layout,    }  
#DASH LAYOUT
app = dash.Dash(__name__
                   )
app.layout =html.Div([
    dcc.Graph(figure=figure,id='mytree')
    ,html.Div(id='place4')
])
@app.callback(dash.dependencies.Output('place4','children')
             ,[dash.dependencies.Input('mytree','hoverData')
              ,dash.dependencies.Input('mytree','clickData')]
             )

def industry_selection(hov,click):
    return('HOVER DATA IS {0}~~~~~~~~~~~~~~~~CLICK DATA IS {1}'.format(hov,click))
app.run_server(debug = False)
2

Hi @Nandex777 welcome to the forum! The problem here is that the data attribute of figure needs to be a list of traces, and you are passing fig which is a full plotly figure with data and layout already so this raises an error when passing figure to the dcc.Graph. The solution here is to to pass only traces fig.data or to update the layout of fig with your desired changes, and pass fig to the dcc.Graph. This is what is done in the updated code below. You can read the tutorial on creating updating plotly figures for more information.

import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
bggolor = '#24252A'
default_layout = {
    'margin': {'r': 5, 't': 20, 'l': 5, 'b': 30},
    'paper_bgcolor': bggolor,
    'plot_bgcolor': bggolor,
}

fig = go.Figure(go.Treemap(

    labels = ["Eve","Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],

    parents = ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"]

))

fig.update_layout(
                    **default_layout,
                    template='plotly_dark',
                    )

app = dash.Dash(__name__
                   )

app.layout =html.Div([
    dcc.Graph(figure=fig,id='mytree')
    ,html.Div(id='place4')
])

@app.callback(dash.dependencies.Output('place4','children')
             ,[dash.dependencies.Input('mytree','hoverData')
              ,dash.dependencies.Input('mytree','clickData')]
             )
def industry_selection(hov,click):
    return('HOVER DATA IS {0}~~~~~~~~~~~~~~~~CLICK DATA IS {1}'.format(hov,click))

app.run_server(debug=True)
1 Like
3

Thank you @Emmanuelle, it’s working.

Great!!!
Regards.
Fernando.