How to anchor text to bottom of page

📊 Plotly Python
1

Hello community,
I want to anchor a text to the bottom left of the page.
I use an export to html.
When I use a negative value for y, the text is shifted below the digram, but when I change the size of the browser window it is not sticking to the bottom of the page.

I tried to add a scrrenshot but upload doesn’t work.
Instead a simple example you could try to run.

import pandas as pd
import plotly.express as px


data = {'A' : [1,2,3],
        'B' : [4, 5, 7]}
df = pd.DataFrame(data)

fig = px.scatter(df)
filter_text = 'example text'

fig.add_annotation(text=filter_text,
            align='left',
            showarrow=False,
            xref='paper',
            yref='paper',
            x=0,
            y=0,
            xanchor="left",
            font_size=15
            )

fig.update_layout(
    margin=dict(b=100)
    )
    

fig_name = 'example'
fig.write_html(fig_name + '.html', auto_open=True, include_plotlyjs='cdn')

Any ideas how to solve it?
Best regards, Stefan

2

Hi @321stefan ,

Welcome to the forum!

As far as I know, if you use annotation text and sticking them to the bottom left of the page , it will not work because the y position of text is respected to the paper of the plot , not page.

So, even if you succeed placing them in to bottom left, it will change when you change the size of browser.

The preferred approach that I can give to you are, by combining these 3 steps:

  1. get html string using to_html function
  2. insert text in the bottom of page using Jinja template
  3. the save the file as html.

You can refer from page here:

Here my suggestion change from your previous code.

import pandas as pd
import plotly.express as px
from jinja2 import Template # adding jinja 

data = {'A' : [1,2,3],
        'B' : [4, 5, 7]}
df = pd.DataFrame(data)

fig = px.scatter(df)
filter_text = 'example text'

# fig.add_annotation(text=filter_text,
#             align='left',
#             showarrow=False,
#             xref='paper',
#             yref='paper',
#             x=0,
#             y=0,
#             xanchor="left",
#             font_size=15
#             )

fig.update_layout(
    margin=dict(b=100)
    )
    

fig_name = 'example'
# fig.write_html(fig_name + '.html', auto_open=True, include_plotlyjs='cdn')

plotly_jinja_data = {"fig":fig.to_html(full_html=False, include_plotlyjs='cdn')}


template = """<!DOCTYPE html>
<html>
<body>
{{ fig }}
<p style="font-size:15px;">{{ filter_text }}</p>
</body>
</html>"""

j2_template = Template(template)
with open(fig_name+'.html', "w", encoding="utf-8") as output_file:
    output_file.write(j2_template.render(plotly_jinja_data,filter_text=filter_text))

Hope this help.

1 Like
3

Hello farispriadi,

thanks a lot for taking the time to figure out this solution :slight_smile:

2 Likes