Search code examples
pythonplotlycellcenter

Is there any way to wrap a cell in plotly?


Is there any way to wrap a cell (to long text fit in my cell), and also to place them in center? This is my table:

import plotly.graph_objects as go

fig = go.Figure(data=[go.Table(
    header=dict(values=['','Monday','Tuesday','Wednesday','thursday','friday','saturday','sunday'],
                line_color='darkslategray',
                fill_color='lightgray',
                align='center'),
     cells=dict(values=[['asdasdasd', 'xvxdwefsdf','asdadwq','zxvwefqewf','wqe124qs'],
                        ["res", 'ds', 'ob', 'pww', 'kw'], # 1 column
                        ['res1', 'ds1', 'ob1', 'pww1', 'kw1'],# 2 column
                        ['res2', 'ds2', 'ob2qweqweqweqweqweqew', 'pww2', 'kw2'],# 3 column
                        ['res3', 'ds3', 'ob4', 'pww3', 'kw3'],# 4 column
                        ['res4', 'ds4', 'ob5', 'pw14151222231231dvzv3123123w4', 'kw4'],# 5 column
                        ['Pancakes' , 'ds5', 'ob6',  'pww5', 'kw5'] ,# 6 column
                        ['Jajecznica', 'ds6', 'obnd' , 'pww6' ,'kw6']], # 7 column
               line_color='darkslategray',
               fill_color='white',
               align='center', 
               height=60))
])
values=['asdasdasd', 'xvxdwefsdf','asdadwq','zxvwefqewf','wqe124qs']
fig.update_layout(width=1300, height=700)

fig.show()

Solution

  • The answer:

    Long sentences are not a problem, but long words can be.

    The details:

    This is a good question. And had me really confused for a while. Because by the looks of some of the examples, Plotly wraps long strings in cells really well:

    enter image description here

    But this happens between words, identified by a space. So in the referred example, if you remove the spaces, you'd get:

    enter image description here

    So what you should do with your real life example is to plan the design and content of your go.Table carefully. And if you have to split a long word, you can of course use a html line break instead of space to get this:

    enter image description here

    In your code snippet, just replace

    'ob2qweqweqweqweqweqew',
    

    ...with:

    'ob2qweqweq<br>weqweqweqew'