# Hovertemplate and customdata with formatted string

**URL:** <https://community.plotly.com/t/hovertemplate-and-customdata-with-formatted-string/45938>\
**Category:** Dash Python\
**Created:** [October 12, 2020, 10:51am UTC](https://community.plotly.com/t/hovertemplate-and-customdata-with-formatted-string/45938 "2020-10-12T10:51:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![matsujju](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/matsujju/32/13952_2.png) [@matsujju](https://community.plotly.com/u/matsujju)\
**Post date:** [October 12, 2020, 10:51am UTC](https://community.plotly.com/t/hovertemplate-and-customdata-with-formatted-string/45938/1 "2020-10-12T10:51:46Z")

</div>

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:

```auto
@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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/6/66dab844a95a4f04dbd21d14b128e68be1fa9a6b.png)

---

<div class="post-metadata">

**Author:** ![matsujju](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/matsujju/32/13952_2.png) [@matsujju](https://community.plotly.com/u/matsujju)\
**Post date:** [October 12, 2020, 2:28pm UTC](https://community.plotly.com/t/hovertemplate-and-customdata-with-formatted-string/45938/2 "2020-10-12T14:28:14Z")

</div>

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,

```auto
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`.