Customize Hover Box Plotly: Python to Fit Text

Question

Is there a way to customize the hover text box in plotly? The text I have to show up in the hover box is quite long and does not fit on the screen. Is there are a way to change the dimensions of the hover text box or make the text smaller to have it all fit on the screen. Even better would be a fixed box on the side of the chart that shows the corresponding note as I scroll over that data point but I am not sure how to do that.

Here is a sample of what I'm trying to do with some similar length text.

import plotly.plotly as py
from plotly.graph_objs import *
import plotly
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd


notes=["Clinton is also navigating delicate ties with Israel and the American Jewish community, an influential group of voters and donors. Israeli Prime Minister Benjamin Netanyahu, a fierce critic of the Obama administration's outreach to Iran, described the framework deal as a threat to the very survival of his nation.", "Fire crews in Cambria County were called to the Revloc duplex Friday morning and found much of the building engulfed in flames. Chief Deputy Coroner Jeffrey Leeds said at least seven people were in the duplex and all, but one, were able to get out safely.Witnesses said Jake Lewis, 24, re-entered the house to rescue 65-year-old Anna LaJudice. But father, Robert LaJudice, told The (Altoona) Mirror.Their bodies were later recovered. The deputy coroner said autopsies determined that both died from smoke and gas inhalation.", "As crews worked to tear down the rest of the home, Ott said she planned to attend a church service and say a prayer for the family."]
balance=[1000,2000,4000]
dates=[1,2,3]


data1 = Data([
    Scatter(
        x=dates,
        y=balance,
        mode='markers',
        text=notes,        
    )
])
layout = Layout(
    title='Hover over the points to see the text',autosize=True,   
)
fig = Figure(data=data1, layout=layout,)

fig['layout'].update(
    hovermode='closest',  
    showlegend=False,     
    autosize=True,       

)
plot_url = py.plot(fig, filename='hover-chart-basic')
py.plot(fig, filename='hover-chart-basic')

Any help would be much appreciated!

Answer 1

You may want to look into annotations to create a fixed text box. Check out our documentation here: https://plot.ly/python/text-and-annotations/ You'll see how to specify font sizes for either annotations or hover text.

Answer 2

The secret is to insert a html <br> tag every ~90 characters or so to your hover string text. You can use the regular expression below to match every ~90 lines.

(.{1,90})(\\s|$)