Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Formating hover data on Plotly.object

Hello everyone,

I created a scatter plot using plotly.object (please see the picture).
Furthermore you will find in the image of the dataframe used for the graph. Finally you will find below the code of my visualization:

fig = go.Figure()
fig.add_trace(go.Scatter(x=test["week_number"], y=test["growth_rate"],
                       marker_color = "#00e39b", mode='markers' , hovertext=test["week"]))

fig.update_traces(mode='lines+markers')

fig.update_layout(
     title_text='Growth rate of new users', 
     title_x = 0.5, 
     xaxis_title_text='Number of week', 
     yaxis_title_text='Growth rate', 
     plot_bgcolor="#EBEDEF",
    )
fig.show()

My question is: how to format the hover data (text displaying when we put the mouse on). Indeed I would like to be able to display the information this way:

rate : 68% - week : 23
June 01, 2020 - June 07, 2020

Thank you very much

You could use like this inside scatterplot.

fig.add_trace(go.Scatter(hovertemplate = """<extra></extra>rate: %{growth_rate} - week:%{week_number}<br>Date: %{week}"""))```

See this helps?

Hi,

Unfortunately this does not work. The picture below shows the result with the code indicated.

So I modified the line of code like this:
hovertemplate = f""“rate: %{test[“growth_rate”]} - week:%{test[“week_number”]}.

Date: %{test[“week”]}”""

but it shows me all the data and not only the one of the point (second picture) :frowning:

what is inside {} is the actual value you want to show on hovering at that point…I just used variable from your datatable and don’t use f""" format here.
Here is example for custom hovering template.