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

Scattermapbox hovertext new line

I’m trying to separate my hover text into new lines with ‘\n’ but it’s not working. The ‘\n’ doesn’t appear in the string, but it’s still all one line. Do I need to use a hovertemplate instead? How can I do this?

Hi @ToastFrench
welcome to the Dash community.

You should use the hovertemplate for that and
. Here’s a brief example:

    hovertemplate =
    '<i>Price</i>: $%{y:.2f}'+
    '<br><b>X</b>: %{x}<br>'+
    '<b>%{text}</b>',

on the Plotly documentation here.

Good luck,

Hi Adam, thanks for your reply. I noticed that x and y are not variables in scattermapbox, so I tried to add the values I want to appear in the text to the lon and lat arrays, which made it so that now, no text appears when I hover over the point on the map. Do you think I could use other parameters in scattermapbox that have float values, instead of lon and lat?

locations=[go.Scattermapbox(
        lon = [-93.721, dfs['Value'].mean()],
        lat = [49.662, dfd['Value'].mean()],   
        mode='markers',
        marker={'color' : 'red'},
        unselected={'marker' : {'opacity':1}},
        selected={'marker' : {'opacity':0.5, 'size':25}},
        hoverinfo='text',
        hovertemplate= '<i>Average Stage</i>: %{lon}'+
                         '<br><b>Average Discharge</b>: %{lat}<br>'

You don’t have to use x or y. Use custum_data=[all variables you want]

Then, instead of x or y, you can put [0] for the first variables inside the cusyom_data attribute.

Sorry, it says the custom_data variable is undefined in scattermapbox. Is this what you meant?

  locations=[go.Scattermapbox(
        custom_data=[dfs['Value'].mean(),dfd['Value'].mean()],
        lon = [-93.721],
        lat = [49.662],   
        mode='markers',
        marker={'color' : 'red'},
        unselected={'marker' : {'opacity':1}},
        selected={'marker' : {'opacity':0.5, 'size':25}},
        hoverinfo='text',
        hovertemplate= '<i>Average Stage</i>: %{custom_data[0]}'+
                        '<br><b>Average Discharge</b>: %{custom_data[1]}<br>'
    )]

Hi @ToastFrench,
It’s hard to help when I can’t replicate your code and run it on my computer. But look at this example here: Column name inside sunburst

You see how customdata[0] refers to “country_txt” and customdata[1] refers to “years”.

See here for another example. This one uses hover_data. How can I manipulate the hovertemplate using Sunbust chart?

Make sure to not use hoverinfo because it is depreciated.

@ToastFrench and @adamschroeder

custom_data is a parameter for px.scatter_mapbox(), but @ToastFrench instantiated go.Scattermapbox. For the latter is customdata, NOT custom_data!!!

This https://chart-studio.plotly.com/~empet/15366 is a tutorial on customdata.

2 Likes