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

Wrap long text in Title in Dash

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!

1 Like

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 :slight_smile:

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!

4 Likes

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.

1 Like

I am so grateful for this comment. Just wanted to highlight how clever of a solution this is.

1 Like

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’}
),

Chart with no title

dcc.Graph(id=“main_graph”),