Search code examples
plotlytreemap

Plotly Treemap Customdata not aligned with labels/ids


I am trying to add custom data to a treemap visual, but I cannot get the custom data to be aligned with the right categories. Here is what I have so far:

enter image description here

As you can see, the ''Name" does not match with the label (top right-corner). Looking at fig.data[0].labels and fig.data[0].customdata I can see that they are not the same order, but I'm not sure how to fix this.

Thank you for your help.

df = pd.read_excel(this_dir/'Clean Tech'/FILE,
              sheet_name=0,
              skiprows=1)
df_plot = df.groupby(['Category','Sub-Category','Company']).size().reset_index()
df_plot.rename(columns={0:"Count"},inplace=True)

df_plot.fillna('TBD', inplace=True)

df_plot.sort_values(by=['Category','Sub-Category','Company'], inplace=True)

fig = px.treemap(df_plot,
             values='Count',
             color='Company',
             path=['Category','Sub-Category','Company'],
             color_discrete_map={'Arolytics': 'navy', 
                                 'Wastewater Treatment': 'lightblue'}, #discrete color assignment
             color_discrete_sequence =['lightgray', 'lightblue', 'teal'],
             template = 'plotly_white',
             title = 'The CleanTech Universe',
             branchvalues="total"
           )

fig.update_traces(root_color='white')

fig.update_layout(font_family='Trebuchet',
              margin = dict(t=50, l=25, r=25, b=25),
             width=1200,
             height=700,
             uniformtext=dict(minsize=10))


companies = df_plot['Company'].tolist()
categories = df_plot['Category'].tolist()

fig.data[0].customdata = np.column_stack([categories, companies,])
fig.data[0].texttemplate = "%{label}<br>%{value}<br>%{customdata[0]}<br>%{customdata[2]}<br>"



fig.show()

Solution

    • using plotly example of creating a Treemap from a data frame as I can't imply what your data
    • the simplest way to populate customdata with Plotly Express is use hover_data argument
    • then it's a simple case of changing texttemplate
    import plotly.express as px
    df = px.data.tips()
    fig = px.treemap(df, path=[px.Constant("all"), 'day', 'time', 'sex'], values='total_bill', hover_data=["sex","smoker","time"])
    fig.update_traces(root_color="lightgrey")
    fig.update_layout(margin = dict(t=50, l=25, r=25, b=25))
    fig.data[0].texttemplate = "%{label}<br>%{value}<br>%{customdata[0]}<br>%{customdata[2]}<br>"
    fig