plotly / dash

Data Apps & Dashboards for Python. No JavaScript Required.
https://plotly.com/dash
MIT License
21.42k stars 2.06k forks source link

Hovertext appears to be escaping HTML codes in Dash when the same text hack/code works for normal plotly figures. #31

Closed pl77 closed 7 years ago

pl77 commented 7 years ago

This is a minor issue but I've generated custom hovertext using the following pandas/python code:

df = df.rename(index=str, columns={"latitude": "lat", "longitude": "lon", "start": "Start", "end": "Finish", "merchant_color": "color"})
df['currency'] = df['current_price'].div(100).apply(lambda x: '${:,.2f}'.format(x))
df['Priceline'] = df.pre_price_text.str.cat(df.currency.astype(str), sep='</br><b>Current Price: </b>')
df['text'] = df.subcategory.str.cat(df.merchant.astype(str), sep='</br><b>Merchant: </b>')
df['text'] = df.text.str.cat(df.Priceline.astype(str), sep='</br><b>Pre-Price Text: </b>')
site_lat = list(df['lat'])
site_lon = list(df['lon'])
site_text = list(df['text'])
data = go.Data([
            go.Scattermapbox( lat=site_lat, lon=site_lon, mode='markers',
                marker=go.Marker(
                    size=10,
                    color=colors,
                    opacity=1
                ), legendgroup=locations_name, name=locations_name,
                text=site_text,
                hoverinfo='text' ) ])
layout = go.Layout( width=1000, height=600,
            margin=go.Margin(l=50, r=50, b=50, t=50, pad=4),
            title=map_title, autosize=True, hovermode='closest',
            mapbox=dict(
                accesstoken=mapbox_access_token, bearing=0, center=dict( lat=44, lon=-90 ), pitch=0, zoom=3, style='light' ) )

fig = dict(data=data, layout=layout)

The code works fine for generating custom html hover text for my maps and gantt charts in both plotly online and offline, but shows up as a single unbroken string with html codes in dash. Is there an undocumented string escape parameter I'm supposed to be using or is a byproduct of the react framework?

Here's how it looks in my normal plotly charts: working

And here's how it looks in dash: broken

As I said, not a major issue but I assume I'm just missing something obvious.

chriddyp commented 7 years ago

Thanks for reporting @pl77 ! Can you try changing the </br> to just <br> or <br/> and see if the line breaks work? It may be just a question of different plotly.js versions in different packages.

pl77 commented 7 years ago

Good idea! I just logged off so I'll try in the morning.

pl77 commented 7 years ago

You were right! Changing </br> to <br> did the trick. Thanks again for your very fast response!