How to break a long line in a hover text Plotly?

Question

I have a hover text that contains a long line (about 200 characters). The problem is that it becomes a long rectangle through the whole figure and it is not possible to see the complete text because it cuts.

My data is in a dataframe. I am plotting x and y and just adding a z variable that contains description in the hover text.

Is it possible to adjust the high and width of the text box? Or could I break the text in several lines?

This is my code at the moment:

fig = make_subplots(rows=2, cols=1,column_widths=[1], 
                    subplot_titles=["A", "B"])
fig.add_trace(
    go.Scatter(
        x=df.varA,
        y=df.varB,
        hovertext = df.varC,
        marker=dict(color='darkblue'),
        mode = 'markers'
    ), row=1, col=1)

fig.add_trace(
    go.Scatter(
       x=df.varA,
        y=df.varB,
        hovertext = df.varC,
        marker=dict(color='darkblue'),
        mode = 'markers'
        ), row=2, col=1)


fig.update_layout(barmode='stack',showlegend=False, height=900, width=1000,title_text="Example")
fig.show()

Please help me :)

Answer 1

Since plotly reads in html including tags, you can insert \n and the break tag <br> into the text for the df variable you want to have wrap when displayed:

df.varA = df.varA.str.wrap(30)
df.varA = df.varA.apply(lambda x: x.replace('\n', '<br>'))

Answer 2

According to the documentation, it seems that strings support HTML markup.

So you could add some <br> tags into you string to break lines:

label = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Sed eget arcu sit amet purus volutpat euismod sed id quam.