Hovertemplate and customdata with formatted string

Dash Python
1

I am trying to get values in certain format using hovertemplate and hover_info but exact values are not showing on hovering. The hover values are columns in dataframe.

Code:

@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.head())

    random.seed(1)
    # print(df_sub.head())
    # create graph

    location = [
        (
            go.Scattermapbox(
                lon=df_sub["longitude"],
                lat=df_sub["latitude"],
                mode="markers+text",
                marker=dict(size=10, allowoverlap=False, opacity=0.7, color="crimson"),
                hoverinfo="text",
                hovertext="<br>".join(
                    [
                        "lat: %{lat}",
                        "long: %{lon}",
                        "casualities: %{casualities_median}",
                        "city: %{city}",
                        "attack happened in: %{year}",
                    ]
                ),
            )
        )
    ]

    # return graph
    return {
        "data": location,
        "layout": go.Layout(
            uirevision="foo",
            hovermode="closest",
            hoverdistance=2,
            mapbox=dict(
                accesstoken=mapbox_access_token,
                style="light",
                center=dict(
                    lat=random.choice(df_sub["latitude"].tolist()),
                    lon=random.choice(df_sub["longitude"].tolist()),
                ),
                zoom=3,
            ),
        ),
    }

This is how it looks on hovering:

Untitled
Untitled881×675 44.8 KB

2

I think I found out the hovering with formatted string. I used customdata parameter with hovertemplate to solve this.
But for the use of customdata in hovertemplate, we have stack the dataframe columns along the last axis i.e customdf = np.stack((df_sub['year'], df_sub['city'] ),axis = -1) here axis = -1 for stacking columns along last axis .
then we can use like,

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_customdf,  # we have to first stack the columns along the last axis
            hovertemplate="""<extra></extra>lat: %{lat}<br>long: %{lon}<br>city: %{customdata[1]}<br>attack happened in: %{customdata[0]}""",
        ),

Here <extra></extra> is to remove/replace the trace0 at the right side of hover. It doesn’t need to be in default hover values(x and y parameters of chart) like (here lat and lon) , they can be kept outside of this but in hovertemplate.