I have a long text in data that being used as title. When users hover over the graph, the text changes correspondingly. However, I have a text that is long and part of the text is being trimmed out. How can I wrap long text in title in Dash?
Thank you!
I come across that often, and you can use textwrap and Dash’s support for some HTML tags in titles.
The one you can use here is the <br> tag.
import textwrap
split_text = textwrap.wrap('This is a very long title and it would be great to have it on three lines',
width=30)
split_text
[‘This is a very long title and’,
‘it would be great to have it’,
‘on three lines’]
'<br>'.join(split_text)
‘This is a very long title and
it would be great to have it
on three lines’
Sorry this forum seems to also accept HTML tags and the previous line is actually on three lines although it should show the <br> tags! But that’s what you want 
The <br>s in the the title would be interpreted as HTML tags, and the title should come out in several lines.
The key parameter is the textwrap.wrap function’s width parameter, which you can use to customize the length of your lines.
Hope that helps!
That is indeed cool little library, and it is even included as standard library in Python, how comes I have never heard about it. But what you want to achieve should be also possible by CSS means, please share with us in what HTML tag you have that text.
I am so grateful for this comment. Just wanted to highlight how clever of a solution this is.
You could also just put another html.H5() header (title) above the graph and use Bootstrap to do the wrapping for you.
html.H5(
id=‘main_graph_title’,
className=‘text-center’,
style={‘color’: ‘#7f7f7f’}
),
dcc.Graph(id=“main_graph”),
Perfect solution, when it comes to using with plotly express
This issue has plagued me in different charts for a long time. I recently discovered this same solution through a much later post on Stack Overflow, but credit where credit is due to @eliasdabbas, who came up with it two years earlier.
Given my struggles with implementing effective word wrap in different layouts and for different types of charts, I wanted to highlight how easily you can use this solution this to wrap any chart text:
import textwrap
def customwrap(s,width=30):
return "<br>".join(textwrap.wrap(s,width=width))
Example:
Here is a basic 100 % stacked bar chart:
It may be a matter of taste, but to me, the labels are too long and the chart is too squished. Simply add the above function and adjust the width until you get something that works:
import plotly
import plotly.express as px
import pandas as pd
import textwrap
cat = ['Some Text','Some Text','Some Text','Some Text',
'Some Longer Text','Some Longer Text','Some Longer Text','Some Longer Text',
'Some Even Longer Text','Some Even Longer Text','Some Even Longer Text','Some Even Longer Text',
'The Longest Text You Have Ever Seen','The Longest Text You Have Ever Seen','The Longest Text You Have Ever Seen','The Longest Text You Have Ever Seen']
val = [20,30,45,5,60,20,10,10,30,30,30,10,20,30,40,10]
rat = ['Great','Good','Average','Bad',
'Great','Good','Average','Bad',
'Great','Good','Average','Bad',
'Great','Good','Average','Bad']
test_list = [list(row) for row in zip(cat, val, rat)]
data = pd.DataFrame(test_list, columns=['Category', 'Value', 'Rating'])
def customwrap(s,width=16):
return "<br>".join(textwrap.wrap(s,width=width))
colors = plotly.colors.qualitative.Prism
fig = px.bar(
x= data['Value'],
y = data['Category'].map(customwrap),
color=data['Rating'],
barmode='stack',
orientation="h",
color_discrete_sequence=colors,
height=300,
width=400
)
fig.update_layout(
font_family="Open Sans, sans-serif",
font_color="steelblue",
font_size=8,
)
fig.show()
Result:
Nice solution @etonblue. I’ve used this for wrapping my titles in the past, but not for the data labels themselves. I’ll definitely be using this in future.