Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding an example of source lines or notes on the bottom of graphs #4873

Open
wants to merge 6 commits into
base: doc-prod
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions doc/python/text-and-annotations.md
Original file line number Diff line number Diff line change
Expand Up @@ -782,6 +782,47 @@ fig.add_annotation(

fig.show()
```
### Specifying Source Lines or Figure Notes on the Bottom of a Figure

Container coordinates are an easy and robust way to put text -- such as a source line or figure note -- at the bottom of a figure. Only the title command supports container coordinates. If you have access to the HTML of the webpage in which you are embedding the graphic, either the source line, title, or both could go there instead.

```
import plotly.express as px
df_iris = px.data.iris()
fig = px.scatter(df_iris, x="sepal_width", y="sepal_length", color="species",
size='petal_length', hover_data=['petal_width'])

#Use the title for the source line
fig.update_layout(
title=dict(text="Note: a near zero container coordinate is the most robust way to position this on the bottom. Only the 'title' supports container coordinates.",
yref="container",
# A small positive y coordinate avoids cutting off the descending strokes of letters like y, p, and q.
y=0.005,
# Paper coordinates let us align this at either edge of the plot region
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the effort on this one @rl-utility-man
I like the idea. When I tried the example, some of the text is cut off
image
Makes me wonder if it's just maybe too specific of an example for the docs. Will it be difficult to get it working if your text looks different or you're running it in a specific environment?

Copy link
Contributor Author

@rl-utility-man rl-utility-man Dec 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point about the cut off text! I reworked the example with short text that works well at a wide variety of screen resolutions and added a comment to the code warning about over long text getting cut off. I also rewrote the comments and documentation text to clarify out the general points I am trying to make with this example. Let me know what you think of the revised version.
image

# (use x=0, xanchor="left" for the lower left corner; that yields a slightly busier result since it's
# not obvious whether we should align with the lower left corner of the plot area or the left edge of the axis labeling )
xref="paper",
xanchor="right",
x=1,
font=dict(size=12))
)

#Repurpose an annotation to insert a title
fig.add_annotation(
xref="paper",
yref="paper",
xanchor="center",
x=0.5,
yanchor="bottom",
y=1.025, # y = 1 is the top of the plot area
text="We can use an annotation to provide the title",
showarrow=False,
font=dict(size=18)
)

fig.show()
```


### Customize Displayed Text with a Text Template

Expand Down