plotly / plotly.py

The interactive graphing library for Python :sparkles: This project now includes Plotly Express!
https://plotly.com/python/
MIT License
16.31k stars 2.55k forks source link

Support text wrap for titles and subtitles #4819

Open ndrezn opened 4 weeks ago

ndrezn commented 4 weeks ago

Titles and subtitles in Plotly charts overflow by default. It's impossible to have them wrap.

With subtitle support, having long strings in this area is more common (and more useful), so we should automatically wrap text if it gets too long in the title or subtitle area.

fig = px.line(x=[1,2,3], y=[4,5,6], title="This is a really really really really really really really really really really really really really really reallyy long title")
fig.update_layout(title_subtitle_text="This is a really really really really really really really really really really really really really really  really really really really really really really long subtitle")
fig

Image

eliasdabbas commented 3 weeks ago

FWIW, I usually use <br> to introduce line breaks, but would love to see how this evolves, and if it changes. Maybe support more HTML tags than what is currently supported.

fig = px.line(x=[1,2,3], y=[4,5,6], title="This is a really really really really really really <br>really really really really really really <br>really really reallyy long title", height=600)
fig.update_layout(title_subtitle_text="This is a really really really really really really really<br> really really really really really really<br> really  really really really really really really really long subtitle")
fig.layout.margin.t = 220
fig

Image

ndrezn commented 3 weeks ago

Yeah, <br> is a solid workaround, but in the context of responsive design we want automatic text wrapping.

Would be nice too to support more HTML tags! Although it's another can of worms to fully (and safely) support inner HTML 😉

eliasdabbas commented 3 weeks ago

Oh, I didn't think of the effects on responsiveness. Great point. I realize it can be tough to safely add more HTML tags :) Thanks!