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

Best way to display lots of text

I’m using plotly as a debugging tool for some spatial data I’m working with. I have thousands of characters of text that I’d like to include somewhere on the html output, but an annotation on a point is too small. Below the plot would be ideal.

How can I display text with many newlines and long lines, ideally maintaining indentation? Thanks!

Hi @chrisranderson,

Here’s an approach using a single multi-line annotation

lines = [
    'def fn(a):',
    '    print("Hello, world!")',
    '    return a**2',
    '',
    'def fn_longlonglonglonglong(a):',
    '    print("Hello, world!")',
    '    return a**2',
    '',
    'def fn_b(a):',
    '    print("Hello, world!")',
    '    return a**2',
    '',
    'def fn_c(a):',
    '    print("Hello, world!")',
    '    return a**2',
    '',
]

text = '<br>'.join(lines)  # Newlines represented by HTML '<br>' sequence

layout = go.Layout(
    height=800,
    width=800,
    yaxis=go.layout.YAxis(domain=[0.5, 1]),
    annotations=[
    go.layout.Annotation(
        bordercolor='black',  # Remove this to hide border
        align='left',  # Align text to the left
        yanchor='top', # Align text box's top edge
        text=text,  # Set text with '<br>' strings as newlines
        showarrow=False, # Hide arrow head
        width=650, # Wrap text at around 800 pixels
        xref='paper',  # Place relative to figure, not axes
        yref='paper',
        font={'family': 'Courier'},  # Use monospace font to keep nice indentation
        x=0, # Place on left edge
        y=0.4 # Place a little more than half way down
)
])

fig = go.FigureWidget(data=[{'y': [2, 3, 1]}], layout=layout)
fig

Hope that’s helpful!
-Jon