Skip to content

Commit f978ef6

Browse files
Further clarified the writing
1 parent 16ebf5e commit f978ef6

File tree

1 file changed

+18
-17
lines changed

1 file changed

+18
-17
lines changed

doc/python/text-and-annotations.md

+18-17
Original file line numberDiff line numberDiff line change
@@ -784,7 +784,7 @@ fig.show()
784784
```
785785
### Specifying Source Lines or Figure Notes on the Bottom of a Figure
786786

787-
A near zero container coordinate is an easy and robust way to put text -- such as a source line or figure note -- at the bottom of a figure. It is easier to specify the bottom of the figure in container coordinates than in e.g. a paper coordinate since it is unclear how big legends and x-axis labels will be. Making the y coordinate of the source/note line very slightly positive avoids cutting off the descending strokes of letters like y, p, and q. Only the title command supports container coordinates, so this example repurposes the title element to insert the note and repurposes an annotation element for the title. The top of the figure is typically less cluttered and more predictable, so an annotation with a paper y-coordinate slightly greater than 1 will generally be a reasonable title location above the plot area.
787+
Sometimes we need to include information about the data source or notes about interpreting the data at the bottom of the figure. This example achieves the desired alignment in the bottom right corner using the title element and container coordinates and uses an annotation for the title. A near zero container coordinate is an easy and robust way to put text -- such as a source line or figure note -- at the bottom of a figure. It is easier to specify the bottom of the figure in container coordinates than in e.g. a paper coordinate since it is unclear how big legends and x-axis labels will be which makes it unclear what paper coordinates to use. Making the y container coordinate of the note very slightly positive avoids cutting off the descending strokes of letters like y, p, and q. Only the title command supports container coordinates, so this example repurposes the title element to insert the note and repurposes an annotation element for the title. The top of the figure is typically less cluttered and more predictable, so an annotation with a paper y-coordinate slightly greater than 1 will generally be a reasonable title location above the plot area.
788788

789789
```import plotly.express as px
790790
df_iris = px.data.iris()
@@ -794,43 +794,44 @@ fig = px.scatter(df_iris, x="sepal_width", y="sepal_length", color="species",
794794
#Use the title for the source / note line
795795
fig.update_layout(
796796
title=dict(text="Note: this is the Plotly title element.",
797-
#keep this short to avoid being cut off in small windows
797+
# keeping this short avoids getting the text cut off in small windows
798+
# if you need longer text, consider embedding your graphic on a web page and
799+
# putting the note in the HTML to use the browser's automated word wrap or
800+
# setting the width of the graph.
798801
yref="container",
799-
# A small positive y coordinate avoids cutting off the descending
800-
# strokes of letters like y, p, and q.
801802
y=0.005,
802-
# Paper x-coordinates let us align this at either the right or left
803-
# edge of the plot region
804-
# Aligning this flush with the right edge of the plot area is
805-
# predictable and easy to code. That is easier than trying to put
806-
# this in the lower left corner since that would likely look best
807-
# aligned with the left edge of the axis labeling and such an alignment
808-
# will require graph specific coordinate adjustments.
803+
# Paper x-coordinates let us align this at either the right or left
804+
# edge of the plot region
805+
# Aligning this flush with the right edge of the plot area is
806+
# predictable and easy to code. That is easier than trying to put
807+
# this in the lower left corner since that would likely look best
808+
# aligned with the left edge of the axis labeling and such an alignment
809+
# will require graph specific coordinate adjustments.
809810
xref="paper",
810811
xanchor="right",
811812
x=1,
812813
813814
font=dict(size=12)),
814815
# We move the legend out of the right margin so the right-aligned note is
815816
# flush with the right most element of the graph.
816-
# In this particular example, the top right corner of the graph region
817-
# is consistently available at all screen resolutions.
817+
# Here we put the legend in a corners of the graph region
818+
# because it has consistent coordinates at all screen resolutions.
818819
legend=dict(
819820
yanchor="top",
820821
y=1,
821822
xanchor="right",
822823
x=1)
823824
)
824825
825-
#Repurpose an annotation to insert a title
826+
# Repurpose an annotation to insert a title
826827
fig.add_annotation(
827828
yref="paper",
828829
yanchor="bottom",
829-
y=1.025, # y = 1 is the top of the plot area; the top is typically uncluttered,
830-
# so this should work on most graphs
830+
y=1.025, # y = 1 is the top of the plot area; the top is typically uncluttered, so placing
831+
# the bottom of the title slightly above the graph region is a robust approach
831832
text="This title is a Plotly annotation",
832833
833-
#center horizontally over the plot area
834+
# Center the title horizontally over the plot area
834835
xref="paper",
835836
xanchor="center",
836837
x=0.5,

0 commit comments

Comments
 (0)