Merge pull request #4873 from rl-utility-man/patch-7

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

Author: LiamConnors

doc/python/text-and-annotations.md

@@ -782,6 +782,66 @@ fig.add_annotation(
 
 fig.show()
 ```
+### Specifying Source Lines or Figure Notes on the Bottom of a Figure
+
+This example shows how to add a note about the data source or interpretation at the bottom of the figure. This example aligns the note in the bottom right corner using the title element and container coordinates and then uses an annotation to add a figure 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 using paper coordinates, since uncertainty about the size of legends and x-axis labels make the paper coordinate of the bottom of the figure uncertain. Making the y container coordinate 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 re-purposes the title element to insert the note and re-purposes an annotation element for the title. The top of the figure is typically less cluttered and more predictable than the bottom of the figure, so an annotation with its bottom at a paper y-coordinate slightly greater than 1 is a reasonable title location on many graphs.
+
+```python
+import plotly.express as px
+df = px.data.iris()
+fig.update_layout(
+        title=dict(text="Note: this is the Plotly title element.",
+                 # keeping this title string short avoids getting the text cut off in small windows
+                 # if you need longer text, consider 1) embedding your graphic on a web page and
+                 # putting the note in the HTML to use the browser's automated word wrap,
+                 # 2) using this approach and also specifying a graph width that shows the whole title,
+                 # or 3) using <BR> tags to wrap the text onto multiple lines
+                yref="container",
+                y=0.005,
+                 # The "paper" x-coordinates lets us align this with either the right or left
+                 # edge of the plot region. 
+                 # The code to align this flush with the right edge of the plot area is 
+                 # predictable and simple.  
+                 # Putting the title in the lower left corner, aligned with the left edge of the axis labeling would
+                 # require graph specific coordinate adjustments.
+                xref="paper",
+                xanchor="right",
+                x=1, 
+                font=dict(size=12)),
+                plot_bgcolor="white",
+
+  # We move the legend out of the right margin so the right-aligned note is 
+  # flush with the right most element of the graph.
+  # Here we put the legend in a corner of the graph region
+  # because it has consistent coordinates at all screen resolutions.
+  legend=dict(
+                yanchor="top",
+                y=1,
+                xanchor="right",
+                x=1,
+                borderwidth=1)
+                )
+
+# Insert a title by repurposing an annotation 
+fig.add_annotation(
+    yref="paper",
+    yanchor="bottom",
+    y=1.025,  # y = 1 is the top of the plot area; the top is typically uncluttered, so placing 
+              # the bottom of the title slightly above the graph region works on a wide variety of graphs
+            text="This title is a Plotly annotation",
+
+    # Center the title horizontally over the plot area
+    xref="paper",
+    xanchor="center",
+    x=0.5, 
+
+    showarrow=False,
+    font=dict(size=18)
+    )
+
+fig.show()
+```
+
 
 ### Customize Displayed Text with a Text Template