Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Showing Graph in Dash bootstrap Popover

I am trying to show Graph in dash-bootstrap popover component but not able to fix the width of the graph.
I want to increase the width of graph but css style feature for width doesn't work after 100% as putting value greater than 100% makes the graph width infinite.
Is this a bug? or something in my code?

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")
attack_killed = pd.read_csv("attack_killed.csv")

terror_region = pd.crosstab(df_copy.year, df_copy.region_txt)
fig1 = px.line(
    terror_region,
    x=terror_region.index,
    y=terror_region.columns,
    title="Affected region over years",
    labels=dict(value="attacks"),
)
fig1.update_layout(
    title=dict(
        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="   ",
    ),
)

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_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)",
                            },
                        )
                    ],
                    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)",
    },
)
region_graph = dcc.Graph(id="regions", figure=fig1)
popover = dbc.Card(
    [
        dbc.CardBody(
            [
                dbc.Button(
                    "Click to see Affected Regions over the Years",
                    id="popover-target",
                    color="dark",
                    className="mr-1",
                    style={"height": "40px"},
                ),
                dbc.Popover(
                    [dbc.PopoverBody(region_graph)],
                    id="popover",
                    is_open=False,
                    target="popover-target",
                    placement="auto",
                    style={
                        "width": "100%",
                        "margin-right": "10%",
                        "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)",
                    },
                ),
            ]
        )
    ]
)


mapbox_access_token = "pk.eyJ1IjoibWF0c3VqanUiLCJhIjoiY2tmcXFiczFiMGRpdzMybzBxZmxtaTVxbiJ9.0zdao0fZdKyGb7CO8dPAVg"
app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        dbc.CardHeader(
                            [html.H1("Terrorism Around the Globe"), html.P("")]
                        )
                    ],
                    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%",
                        "border-radius": "10px",
                    },
                ),
                # dbc.Col(
                #     html.Img(
                #         src=app.get_asset_url("terrorism_logo.jpg"),
                #         style={
                #             "height": "60px",
                #             "width": "auto",
                #             "margin": "0px",
                #             "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",
                    },
                ),
                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=px.colors.qualitative.Alphabet,
        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="center",
            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()[:10].index,
        values=dff["weapon_type"].value_counts()[:10],
        # labels={"index": "", "value": ""},
        color=dff["weapon_type"].value_counts()[:10],
        hole=0.4,
        # color_discrete_sequence=["#bdbdbd", "#969696", "#737373", "#525252",],
        color_discrete_sequence=["#ff6969", "#d34949", "#da3232", "#b80000", "#620000"],
        # 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,
    )

    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_graph(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": "", "y": ""},
        # 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> <br>  <i> (Attack Counts vs Year)</i>",
            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("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


@app.callback(
    Output("popover", "is_open"),
    [Input("popover-target", "n_clicks")],
    [State("popover", "is_open")],
)
def toggle_popover(n, is_open):
    if n:
        return not is_open
    return is_open


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


How popover graph looks:

Any help will be appreciated.