Black Lives Matter. Please consider donating to Black Girls Code today.

Column name inside sunburst

how to put column name in each section of sunburst from root--->leaf?
I tried using text and textinfo parameters in update_traces of figure but it doesn’t show in correct order.

Code: (Here columns are in path and I want these to show as text in chart)

fig = px.sunburst(
        dff,
        path=["country_txt", "year", "Attacks", "killed"],
        labels={"country_txt": "Country"},
        color="year",
        color_discrete_sequence=px.colors.qualitative.Alphabet,
        maxdepth=-1,
        branchvalues="remainder",
        # hover_data=["country_txt", "year", "Attacks", "killed"],
    )
    fig.update_traces(
        text=["country_txt", "year", "Attacks", "killed"],
        textinfo="text",

Chart how it looks like:

Here is the link to the data for reproducibility.

HI @matsujju
can you please add a reproducible code. When I copy-paste the code and data that you shared, I get a different sunburst plot than the one you get. I get this:

Please add the code that you are using to create the sunburst in the image you attached.

Sorry Here is the full code. I filtered the data according to user input. I have deleted some code to fit the 32000 character limit of this post but it doesn’t relate to the question I asked.

Code:

import random
import pandas as pd
import numpy as np
import plotly_express as px
from plotly.subplots import make_subplots
import plotly
from plotly import tools
import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

df_copy = pd.read_csv("data.csv")

#############
card_graph2 = dbc.Card(
    [
        dbc.CardBody(
            dcc.Graph(
                id="id-graph2",
                figure={},
                config={
                    "displaylogo": False,
                    "doubleClick": False,
                    "modeBarButtonsToRemove": [
                        "pan2d",
                        "select2d",
                        "lasso2d",
                        "zoomIn2d",
                        "zoomOut2d",
                        "autoScale2d",
                        "toggleSpikelines",
                        "hoverCompareCartesian",
                    ],
                },
            )
        ),
    ]
)

card_graph1 = dbc.Card([dbc.CardBody([dcc.Graph(id="id-graph1", figure={}),],),])
card_bar_control = dbc.Card(
    [
        dbc.CardBody(
            [
                dcc.Dropdown(
                    id="demo-dropdown",
                    options=[
                        {"label": str(item), "value": str(item)}
                        for item in sorted(df_copy["country_txt"].unique())
                    ],
                    placeholder="Select a country...",
                    value="United States",
                    optionHeight=25,
                    searchable=True,
                    search_value="",
                    clearable=True,
                ),
            ]
        )
    ]
)
card_graph3 = dbc.Card(
    [
        dbc.CardBody(
            [
                dcc.Graph(
                    id="cities",
                    figure={},
                    config={
                        "displaylogo": False,
                        "doubleClick": False,
                        "modeBarButtonsToRemove": [
                            "select2d",
                            "lasso2d",
                            "autoScale2d",
                            "toggleSpikelines",
                            "hoverCompareCartesian",
                        ],
                    },
                ),
            ]
        )
    ]
)
card_graph4 = dbc.Card(
    [
        dbc.CardBody(
            [
                dcc.Graph(
                    id="donut",
                    figure={},
                    config={
                        "displaylogo": False,
                        "doubleClick": False,
                        "modeBarButtonsToRemove": [
                            "select2d",
                            "lasso2d",
                            "autoScale2d",
                            "toggleSpikelines",
                            "hoverCompareCartesian",
                        ],
                    },
                ),
            ]
        )
    ]
)
card_graph5 = dbc.Card(
    [
        dbc.CardBody(
            [
                dcc.Graph(
                    id="casualities",
                    figure={},
                    config={
                        "displaylogo": False,
                        "doubleClick": False,
                        "modeBarButtonsToRemove": [
                            "select2d",
                            "lasso2d",
                            "autoScale2d",
                            "toggleSpikelines",
                            "hoverCompareCartesian",
                        ],
                    },
                ),
            ]
        )
    ]
)
card_graph6 = dbc.Card(
    [
        dbc.CardBody(
            [
                dcc.Graph(
                    id="terror-group",
                    figure={},
                    config={
                        "displaylogo": False,
                        "doubleClick": False,
                        "modeBarButtonsToRemove": [
                            "select2d",
                            "lasso2d",
                            "autoScale2d",
                            "toggleSpikelines",
                            "hoverCompareCartesian",
                        ],
                    },
                ),
            ]
        )
    ]
)
card_stat = dbc.Card(
    [
        dbc.CardBody(
            [
                dcc.Graph(
                    id="attacks",
                    figure={},
                    config={
                        "displaylogo": False,
                        "doubleClick": False,
                        "modeBarButtonsToRemove": [
                            "select2d",
                            "lasso2d",
                            "autoScale2d",
                            "toggleSpikelines",
                            "hoverCompareCartesian",
                        ],
                    },
                )
            ]
        )
    ]
)
card_killed = dbc.Card(
    [
        dbc.CardBody(
            [
                dcc.Graph(
                    id="killed",
                    figure={},
                    config={
                        "displaylogo": False,
                        "doubleClick": False,
                        "modeBarButtonsToRemove": [
                            "select2d",
                            "lasso2d",
                            "autoScale2d",
                            "toggleSpikelines",
                            "hoverCompareCartesian",
                        ],
                    },
                ),
            ]
        )
    ]
)
card_tab = dcc.Tabs(
    id="tabs-with-classes",
    value="tab-2",
    parent_className="custom-tabs",
    className="custom-tabs-container",
    children=[
        dcc.Tab(
            label="Every Life matters",
            value="tab-1",
            className="custom-tab",
            selected_className="custom-tab--selected",
            children=[
                dbc.Row(
                    [
                        dbc.Col(
                            dbc.Card(dbc.CardBody(card_graph5)),
                            style={
                                "width": "49.5%",
                                "display": "inline-block",
                                "margin-top": "0.25%",
                                "margin-bottom": "0%",
                                "margin-right": "0.5%",
                                "border-radius": "10px",
                                "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                            },
                        ),
                        dbc.Col(
                            dbc.Card(dbc.CardBody(card_killed)),
                            style={
                                "width": "49.5%",
                                "display": "inline-block",
                                "margin-top": "0.25%",
                                "margin-bottom": "0%",
                                "margin-left": "0.5%",
                                "border-radius": "10px",
                                "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                            },
                        ),
                    ],
                    style={"background-color": "#f4f4f4"},
                )  # put card inside tabs
            ],
        ),
        dcc.Tab(
            label="More Details Here",
            value="tab-2",
            className="custom-tab",
            selected_className="custom-tab--selected",
            children=[
                dbc.Row(
                    [
                        dbc.Col(
                            dbc.Card(dbc.CardBody(card_graph3)),
                            style={
                                "width": "49.5%",
                                "display": "inline-block",
                                "margin-top": "0.25%",
                                "margin-right": "0.5%",
                                "border-radius": "10px",
                                "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                            },
                        ),
                        dbc.Col(
                            dbc.Card(dbc.CardBody(card_graph4)),
                            style={
                                "width": "49.5%",
                                "display": "inline-block",
                                "margin-top": "0.25%",
                                "margin-left": "0.5%",
                                "border-radius": "10px",
                                "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                            },
                        ),
                    ],
                    style={"background-color": "#f4f4f4"},
                ),
                dbc.Row(
                    [
                        dbc.Col(
                            dbc.Card(dbc.CardBody(card_graph2)),
                            style={
                                "width": "49.5%",
                                "display": "inline-block",
                                "margin-top": "0.25%",
                                "margin-right": "0.5%",
                                "border-radius": "10px",
                                "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                            },
                        ),
                        dbc.Col(
                            dbc.Card(dbc.CardBody(card_graph6)),
                            style={
                                "width": "49.5%",
                                "display": "inline-block",
                                "margin-top": "0.25%",
                                "margin-left": "0.5%",
                                "border-radius": "10px",
                                "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                            },
                        ),
                    ],
                    style={"background-color": "#f4f4f4"},
                ),
            ],
        ),
    ],
    style={
        "background-color": "#f4f4f4",
        "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
    },
)

mapbox_access_token = "pk.eyJ1IjoibWF0c3VqanUiLCJhIjoiY2tmcXFiczFiMGRpdzMybzBxZmxtaTVxbiJ9.0zdao0fZdKyGb7CO8dPAVg"
app = dash.Dash(__name__)
app.config.suppress_callback_exceptions = True
server = app.server
app.layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        dbc.CardHeader(
                            [
                                html.H1("Terrorism Around the Globe"),
                                html.P(
                                    [
                                        "To be considered an act of terrorism, an action must be violent, or threaten violence.As such, political dissent, activism, and nonviolent resistance do not constitute terrorism. There are, however, many instances around the world of authorities restricting individuals’ freedom of expression under the pretext of counter-terrorism measures. Human rights groups, such as",
                                        html.A(
                                            " Amnesty International ",
                                            href="https://www.amnesty.org/en/latest/news/",
                                        ),
                                        "and",
                                        html.A(
                                            " Human Rights Watch ",
                                            href="https://www.hrw.org/topic/free-speech",
                                        ),
                                        "publish reports on such cases of censorship.",
                                    ]
                                ),
                            ]
                        )
                    ],
                    style={
                        "text-align": "left",
                        "font-size": "100%",
                        "color": "black",
                        "font-weight": "bold",
                        "padding-top": "1px",
                        "padding-right": "1px",
                        "padding-bottom": " 1px",
                        "padding-left": "1px",
                        "margin-left": "2%",
                        "margin-right": "2%",
                        "border-radius": "10px",
                    },
                ),
                # dbc.Col(
                #     html.Img(
                #         src=app.get_asset_url("dash-logo.png"),
                #         style={
                #             "height": "60px",
                #             "width": "auto",
                #             "margin-right": "2%",
                #             "padding-top": "0px",
                #             "padding-bottom": "0px",
                #             "display": "inline",
                #             "float": "right",
                #         },
                #     )
                # ),
            ],
            className="one-third column",
        ),
        dbc.Row(
            [
                dbc.Col(
                    card_bar_control,
                    style={
                        "width": "30%",
                        "display": "inline-block",
                        "margin-left": "2%",
                        "margin-right": "2%",
                        "margin-bottom": "1%",
                        "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                        "border-radius": "10px",
                    },
                ),
                dbc.Col(
                    popover,
                    style={
                        "width": "22.65%",
                        "display": "inline-block",
                        "margin-left": "40%",
                        "margin-right": "2%",
                        "margin-bottom": "1%",
                        "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                        # "border-radius": "10px",
                        "background-color": "#fefefe",
                    },
                ),
                dbc.Col(
                    [
                        html.H3("Drag the Slider to Change the Year:"),
                        dcc.RangeSlider(
                            id="year_slider",
                            min=df_copy["year"].min(),
                            max=df_copy["year"].max(),
                            step=1,
                            value=[2010, 2014],
                            marks={
                                item: str(item)
                                for item in df_copy["year"].unique().tolist()[::3]
                            },
                        ),
                    ],
                    style={
                        "margin-left": "2%",
                        "margin-right": "2%",
                        "margin-bottom": "1%",
                        "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                        "border-radius": "7px",
                        "background-color": "#fefefe",
                        "padding-left": "20px",
                        "padding-top": "7px",
                    },
                ),
            ],
            no_gutters=True,
        ),
        dbc.Row(
            [
                dbc.Col(
                    card_graph1,
                    style={
                        "width": "47%",
                        "display": "inline-block",
                        "margin-left": "2%",
                        "padding-top": "0px",
                        "border-radius": "10px",
                        "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                    },
                ),
                dbc.Col(
                    card_stat,
                    style={
                        "width": "47%",
                        "display": "inline-block",
                        "margin-right": "2%",
                        "margin-left": "2%",
                        "border-radius": "10px",
                        "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                    },
                ),
            ],
            justify="around",
        ),
        dbc.Row(
            dbc.Col(
                card_tab,
                style={
                    "width": "96%",
                    "margin-left": "2%",
                    "display": "inline-block",
                    "margin-top": "1%",
                    "margin-right": "2%",
                    "border-radius": "10px",
                    "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                    # "height": "575px",
                },
            ),
        ),
    ],
    style={"background-color": "#f4f4f4"},
)


@app.callback(
    Output("id-graph1", "figure"),
    [Input("demo-dropdown", "value"), Input("year_slider", "value")],
)
def update_map(drop_value, year_value):
    # print(year_value)
    df_sub = df_copy.loc[
        (df_copy["year"] >= year_value[0]) & (df_copy["year"] <= year_value[1])
    ]

    df_sub = df_sub.loc[df_sub["country_txt"] == drop_value]
    # print(df_sub.city.head())

    random.seed(11)
    # print(df_sub.head())
    # create graph
    fig = go.Figure()
    new_customdatadf = np.stack(  # stacking of columns along last axis
        (
            df_sub["casualities_median"],
            df_sub["city"],
            df_sub["year"],
            df_sub["province"],
        ),
        axis=-1,
    )

    fig.add_traces(
        go.Scattermapbox(
            lon=df_sub["longitude"],
            lat=df_sub["latitude"],
            mode="markers",
            marker=dict(size=10, allowoverlap=False, opacity=0.7, color="crimson"),
            # text=df_sub["casualities_median"],
            customdata=new_customdatadf,  # we have to first stack the columns along the last axis
            hovertemplate="""<extra></extra>lat: %{lat}<br>long: %{lon}<br>casualities: %{customdata[0]}<br>city: %{customdata[1]}<br>State: %{customdata[3]}<br>attack happened in: %{customdata[2]}""",
        ),
    )

    fig.update_layout(
        title=dict(
            text=f"<b>Satellite Overview of {drop_value}</b>",
            font=dict(family="Gravitas One", size=20, color="black",),
            xanchor="left",
            xref="container",
        ),
        uirevision="foo",
        hovermode="closest",
        hoverdistance=2,
        mapbox=dict(
            accesstoken=mapbox_access_token,
            style="dark",
            center=dict(
                lat=random.choice(df_sub["latitude"].tolist()),
                lon=random.choice(df_sub["longitude"].tolist()),
            ),
            zoom=5,
        ),
    )
    return fig


@app.callback(
    Output("attacks", "figure"),
    [Input("demo-dropdown", "value"), Input("year_slider", "value")],
)
def attack_kill(drop_value, year_value):
    dff = attack_killed.loc[
        (attack_killed["year"] >= year_value[0])
        & (attack_killed["year"] <= year_value[1])
    ]
    dff = dff.loc[dff["country_txt"] == drop_value]
    fig = px.sunburst(
        dff,
        path=["country_txt", "year", "Attacks", "killed"],
        color="year",
        color_discrete_sequence=[
            "#0d0887",
            "#46039f",
            "#7201a8",
            "#9c179e",
            "#bd3786",
            "#d8576b",
            "#ed7953",
            "#fb9f3a",
            "#fdca26",
            "#f0f921",
        ],
        maxdepth=-1,
        branchvalues="remainder",
        hover_data=["country_txt", "year", "Attacks", "killed"],
        # template="ggplot2",
        title=f"<b>Terror Attacks Vs People Killed in {drop_value}</b>",
    )
    fig.update_traces(
        # textinfo="text",
        hovertemplate="<b>Country: %{customdata[0]}</b><br>"
        + "<b>Year Selected: %{customdata[1]}</b><br>"
        + "<b>Terror Attacks: %{customdata[2]}</b><br>"
        + "<b>People Killed: %{customdata[3]}</b><br>"
        + "<extra></extra>",
    )
    fig.update_layout(
        title=dict(
            font=dict(family="Gravitas One", size=20, color="black",),
            xanchor="left",
            xref="container",
        ),
        coloraxis_showscale=False,
    )
    return fig


@app.callback(Output("id-graph2", "figure"), [Input("demo-dropdown", "value")])
def pie2(drop_value):

    dff = df_copy.loc[df_copy["country_txt"] == drop_value]

    fig = px.pie(
        dff,
        names=dff["weapon_type"].value_counts()[:9].index,
        values=dff["weapon_type"].value_counts()[:9],
        # labels={"index": "", "value": ""},
        color=dff["weapon_type"].value_counts()[:9],
        hole=0.4,
        # color_discrete_sequence=["#bdbdbd", "#969696", "#737373", "#525252",],
        # color_discrete_sequence=["#ff6969", "#d34949", "#da3232", "#b80000", "#620000"],
        # ffffcc #ffeda0 #fed976 #feb24c #fd8d3c #fc4e2a #e31a1c #bd0026 #800026
        # ffffcc
        # ffeda0
        # fed976
        # feb24c
        # fd8d3c
        # fc4e2a
        # e31a1c
        # bd0026
        # 800026
        color_discrete_sequence=[
            # "#800026",
            "#bd0026",
            "#e31a1c",
            "#fc4e2a",
            "#fd8d3c",
            " #feb24c",
            "#fed976",
            " #ffeda0",
            " #ffffcc",
        ],
        # hover_name=dff["weapon_type"].value_counts()[:10].index,
    )
    fig.update_traces(
        hovertemplate=None, hoverinfo="all", rotation=45,
    )
    fig.update_layout(
        title=dict(
            text=f"<b>Weapons used in {drop_value}</b>",
            font=dict(family="Gravitas One", size=20, color="black",),
            xanchor="left",
            xref="container",
        ),
    )
    return fig


@app.callback(Output("cities", "figure"), [Input("demo-dropdown", "value")])
def bar_graph2(drop_value):
    dff_sub = df_copy.loc[df_copy["country_txt"] == drop_value]

    # Figure1

    fig = px.bar(
        dff_sub["city"].value_counts()[:10].sort_values(ascending=True),
        orientation="h",
        title="<b>Top 10 cities which are badly affected by Terrorism</b> <br>        <i>(Cities vs Attack Counts)</i></br>",
        labels={"index": "", "value": ""},
        color=dff_sub["city"].value_counts()[:10].sort_values(ascending=True),
        # color_continuous_scale=["#bdbdbd", "#969696", "#737373", "#525252",],
        color_continuous_scale=["#ff6969", "#d34949", "#da3232", "#b80000", "#620000"],
    )
    fig.update_layout(
        title=dict(
            font=dict(family="Gravitas One", size=20, color="black",),
            xanchor="left",
            xref="container",
        ),
        coloraxis_showscale=False,
        plot_bgcolor="#FFFFFF",
        legend={"bordercolor": "red", "borderwidth": 1},
        xaxis=dict(
            showticklabels=True,
            visible=True,
            showgrid=False,
            ticks="outside",
            # title=dict(font=dict(family="Balto", size=15)),
        ),
        yaxis=dict(
            showticklabels=True,
            visible=True,
            showgrid=False,
            # title=dict(font=dict(family="Balto", size=15)),
            tickfont=dict(family="Balto", size=19, color="black"),
            ticksuffix="   ",
        ),
    )

    return fig
    # Figure2


@app.callback(Output("donut", "figure"), [Input("demo-dropdown", "value")])
def pie1(drop_value):
    dff_sub = df_copy.loc[df_copy["country_txt"] == drop_value]
    dic = {0: "Unsuccessful Attempt", 1: "Successful Attempt"}
    dff_sub["success"] = dff_sub["success"].map(dic)

    fig = px.pie(
        dff_sub,
        names=dff_sub["success"].value_counts().index,
        values=dff_sub["success"].value_counts(),
        hole=0.4,
        # hover_name=dff_sub["success"].value_counts().index,
        color_discrete_sequence=["#bd0026", " #ffffcc"],
    )

    fig.update_traces(hovertemplate=None, hoverinfo="all")
    fig.update_layout(
        title=dict(
            text=f"<b>Success Rate of Terror Attacks in {drop_value}</b>",
            font=dict(family="Gravitas One", size=20, color="black",),
            xanchor="left",
            xref="container",
        )
    )

    return fig
    # Figure3


@app.callback(Output("casualities", "figure"), [Input("demo-dropdown", "value")])
def line_graph1(drop_value):
    dff_sub = (
        df_copy.loc[df_copy["country_txt"] == drop_value]
        .groupby(["year"])["casualities"]
        .sum()
    )

    fig = px.line(
        x=dff_sub.index,
        y=dff_sub.values,
        labels={"x": "Year", "y": "Casualities"},
        # color="rgb(220, 20, 60)",
        color_discrete_sequence=["rgb(220, 20, 60)"],
        # height=575,
    )
    fig.update_traces(line=dict(color="crimson", width=3), mode="lines+markers",),
    fig.update_layout(
        title=dict(
            text="<b> Casualities over the Year </b> ",
            font=dict(family="Gravitas One", size=20, color="black",),
            xanchor="left",
            xref="container",
        ),
        hovermode="x",  # it shows the value along x-axis ticks on hovering in plot
        hoverdistance=20000,  # distance above/right of the plot till where the user can hover
        spikedistance=20000,  # length of spike according to data max value
        xaxis=dict(
            tickmode="linear",  # how tick value will change
            tick0=1970,  # starting tick in plot along respective axis
            dtick=1,  # gap between each ticks
            visible=True,
            showgrid=False,
            showspikes=True,  # Show spike line for X-axis
            # Format spike
            spikethickness=2,
            spikedash="dot",
            spikecolor="#999999",
            spikemode="across",
            linecolor="#737373",
            range=[1970, 2017],
        ),
        margin=dict(autoexpand=True, r=20, l=40, t=100),
        plot_bgcolor="#FFFFFF",
        yaxis=dict(
            visible=True,
            showgrid=False,
            linecolor="#737373",
            ticks="outside",
            ticksuffix="   ",
        ),
    )

    return fig
    # Figure4


@app.callback(Output("killed", "figure"), [Input("demo-dropdown", "value")])
def line_graph2(drop_value):
    dff_sub = (
        df_copy.loc[df_copy["country_txt"] == drop_value]
        .groupby(["year"])["killed"]
        .sum()
    )

    fig = px.line(
        x=dff_sub.index,
        y=dff_sub.values,
        labels={"x": "Year", "y": "Killed"},
        # color="rgb(220, 20, 60)",
        color_discrete_sequence=["rgb(220, 20, 60)"],
        # height=575,
    )
    fig.update_traces(line=dict(color="crimson", width=3), mode="lines+markers",),
    fig.update_layout(
        title=dict(
            text="<b> Killings over the Year </b> ",
            font=dict(family="Gravitas One", size=20, color="black",),
            xanchor="left",
            xref="container",
        ),
        hovermode="x",  # it shows the value along x-axis ticks on hovering in plot
        hoverdistance=20000,  # distance above/right of the plot till where the user can hover
        spikedistance=20000,  # length of spike according to data max value
        xaxis=dict(
            tickmode="linear",  # how tick value will change
            tick0=1970,  # starting tick in plot along respective axis
            dtick=1,  # gap between each ticks
            visible=True,
            showgrid=False,
            showspikes=True,  # Show spike line for X-axis
            # Format spike
            spikethickness=2,
            spikedash="dot",
            spikecolor="#999999",
            spikemode="across",
            linecolor="#737373",
            range=[1970, 2017],
        ),
        margin=dict(autoexpand=True, r=20, l=40, t=100),
        plot_bgcolor="#FFFFFF",
        yaxis=dict(
            visible=True,
            showgrid=False,
            linecolor="#737373",
            ticks="outside",
            ticksuffix="   ",
        ),
    )

    return fig


@app.callback(Output("terror-group", "figure"), [Input("demo-dropdown", "value")])
def bar_graph3(drop_value):
    dff_sub = df_copy.loc[df_copy["country_txt"] == drop_value]

    fig = px.bar(
        dff_sub["group"].value_counts()[:10],
        orientation="v",  # orientation of axes
        title=f"<b>Terror Groups Active/was active in {drop_value}</b> <br>  <i> (Attack Counts vs Terror Groups)</i></br>",
        labels={"index": "", "value": ""},  # renaming axes titles
        color=dff_sub["group"].value_counts()[:10],
        # color_continuous_scale=["#bdbdbd", "#969696", "#737373", "#525252",],
        color_continuous_scale=["#ff6969", "#d34949", "#da3232", "#b80000", "#620000"],
        # height=575,  # height of chart (not plot area)
    )
    fig.update_layout(
        # changes related to title of chart
        title=dict(
            font=dict(family="Gravitas One", size=20, color="black",),
            xanchor="left",  # title start from left of chart area
            xref="container",  # where to put the title along x-direction (container: whole chart length is used)
        ),
        margin=dict(autoexpand=True, b=280),  # margin of chart area (l ,r ,t, b ,pad)
        coloraxis_showscale=False,  # hide colorscale
        plot_bgcolor="#FFFFFF",  # color of plot area
        # changes related to yaxis
        yaxis=dict(
            visible=True,  # show the ticks and labels
            showgrid=False,  # hide the gridlines
            ticks="outside",
            ticksuffix="   ",
            # title=dict(font=dict(family="Balto", size=15))  # changes in title of y-axis
        ),
        # changes related to x-axis
        xaxis=dict(
            visible=True,
            showgrid=False,
            # title=dict(font=dict(family="Balto", size=15), standoff=5),
            tickfont=dict(
                family="Balto", size=17, color="black"
            ),  # changes related to ticks
            ticksuffix="   ",  # manages gap between ticks and axis title
            automargin=True,  # self-explanatory
            tickangle=45,  # changes the angle of ticks
        ),
    )

    return fig

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


When path is:

path=["country_txt", "year", "Attacks", "killed"]

I get this:

What are you trying to change?

I want the column names in each section of sunburst i.e first section is country_txt, second is from year, third from Attacks and fourth from killed. They should also be present with the value as text info.

Try adding this customdata to your:

px.sunburst(custom_data=["country_txt", "year", "Attacks", "killed"])

And then change the hovertemplate like this:

fig.update_traces(
        hovertemplate='country: %{customdata[0]}<br>'
                      'Year: %{customdata[1]}<br>'
                      'Attacks: %{customdata[2]}<br>'
                      'killed: %{customdata[3]}<br>',
)

You should get:

On hover it is showing what you showed but I am not able to figure out how to add text inside each section which belongs to whichever column. Like with 2005, it should also have year as text not just on hover. This is where I am struggling.

I see. I don’t think that’s possible.

Ok. Thanks for your all help Adam.

Should I open github issue related to this?

@matsujju

I succeeded to add text as you required:

import pandas as pd
import plotly.express as px

df=pd.read_csv('https://raw.githubusercontent.com/empet/Datasets/master/attack_killed.csv')
df['killed'] = df['killed'].astype(int)


fig = px.sunburst(
        df,
        path=["country", "year", "attacks", "killed"],
        labels={"country": "Country"},
        color="year",
        color_discrete_sequence=px.colors.qualitative.Alphabet,
        maxdepth=-1,
        branchvalues="remainder"    
    )
fig.update_layout(width=900, height=900);  

text = []

for w in fig.data[0].ids:
    if '/'  not in w:
        text.append(f'Country: {w}')
    else:
        sw = w.split('/')
        if len(sw) == 2:
            text.append(f'Country: {sw[0]}<br>Year: {sw[1]}')
        elif len(sw) == 3:
            text.append(f'Country: {sw[0]}<br>Year: {sw[1]}<br>Attacks: {sw[2]}')
        elif len(sw) == 4:
            text.append(f'Country: {sw[0]}<br>Year: {sw[1]}<br>Attacks: {sw[2]}<br>Killed: {sw[3]}')
        else: pass     
    

fig.update_traces(text=text, 
                  textinfo='text',
                  hoverinfo='text',
                  hovertemplate=None)

Thanks for all your help. You saved my day.