From a81e418ec0f2bae38d6bef9015cdff55a42b9551 Mon Sep 17 00:00:00 2001 From: Rob L Date: Tue, 12 Nov 2024 23:09:54 -0500 Subject: [PATCH 01/11] Adding an example showing how to put source lines or notes on the bottom of graphs --- doc/python/text-and-annotations.md | 41 ++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/doc/python/text-and-annotations.md b/doc/python/text-and-annotations.md index ca8dbd63dfa..64f1c1c9aae 100644 --- a/doc/python/text-and-annotations.md +++ b/doc/python/text-and-annotations.md @@ -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 + # (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 From 16ebf5e7fe58f765f0fe7119875ced08c65642e2 Mon Sep 17 00:00:00 2001 From: Rob Letzler Date: Fri, 20 Dec 2024 23:02:20 -0500 Subject: [PATCH 02/11] added clearer commentary and made the example robust to varying screen sizes --- doc/python/text-and-annotations.md | 55 ++++++++++++++++++++---------- 1 file changed, 37 insertions(+), 18 deletions(-) diff --git a/doc/python/text-and-annotations.md b/doc/python/text-and-annotations.md index 64f1c1c9aae..086eb898c77 100644 --- a/doc/python/text-and-annotations.md +++ b/doc/python/text-and-annotations.md @@ -784,41 +784,60 @@ 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. +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. -``` -import plotly.express as px +```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 +#Use the title for the source / note 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.", + title=dict(text="Note: this is the Plotly title element.", + #keep this short to avoid being cut off in small windows yref="container", - # A small positive y coordinate avoids cutting off the descending strokes of letters like y, p, and q. + # 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 - # (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 ) + # Paper x-coordinates let us align this at either the right or left + # edge of the plot region + # Aligning this flush with the right edge of the plot area is + # predictable and easy to code. That is easier than trying to put + # this in the lower left corner since that would likely look best + # aligned with the left edge of the axis labeling and such an alignment + # will require graph specific coordinate adjustments. xref="paper", xanchor="right", x=1, - font=dict(size=12)) -) + + font=dict(size=12)), + # We move the legend out of the right margin so the right-aligned note is + # flush with the right most element of the graph. + # In this particular example, the top right corner of the graph region + # is consistently available at all screen resolutions. + legend=dict( + yanchor="top", + y=1, + xanchor="right", + x=1) + ) #Repurpose an annotation to insert a title fig.add_annotation( - xref="paper", yref="paper", + yanchor="bottom", + y=1.025, # y = 1 is the top of the plot area; the top is typically uncluttered, + # so this should work on most graphs + text="This title is a Plotly annotation", + + #center horizontally over the plot area + xref="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) - ) + + showarrow=False, + font=dict(size=18) + ) fig.show() ``` From f978ef6ef7d6d03a53c555f3e9fec1af4cc288a7 Mon Sep 17 00:00:00 2001 From: Rob Letzler Date: Sun, 22 Dec 2024 22:39:47 -0500 Subject: [PATCH 03/11] Further clarified the writing --- doc/python/text-and-annotations.md | 35 +++++++++++++++--------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/doc/python/text-and-annotations.md b/doc/python/text-and-annotations.md index 086eb898c77..eecb6c2c31e 100644 --- a/doc/python/text-and-annotations.md +++ b/doc/python/text-and-annotations.md @@ -784,7 +784,7 @@ fig.show() ``` ### Specifying Source Lines or Figure Notes on the Bottom of a Figure -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. +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. ```import plotly.express as px df_iris = px.data.iris() @@ -794,18 +794,19 @@ fig = px.scatter(df_iris, x="sepal_width", y="sepal_length", color="species", #Use the title for the source / note line fig.update_layout( title=dict(text="Note: this is the Plotly title element.", - #keep this short to avoid being cut off in small windows + # keeping this short avoids getting the text cut off in small windows + # if you need longer text, consider embedding your graphic on a web page and + # putting the note in the HTML to use the browser's automated word wrap or + # setting the width of the graph. yref="container", - # A small positive y coordinate avoids cutting off the descending - # strokes of letters like y, p, and q. y=0.005, - # Paper x-coordinates let us align this at either the right or left - # edge of the plot region - # Aligning this flush with the right edge of the plot area is - # predictable and easy to code. That is easier than trying to put - # this in the lower left corner since that would likely look best - # aligned with the left edge of the axis labeling and such an alignment - # will require graph specific coordinate adjustments. + # Paper x-coordinates let us align this at either the right or left + # edge of the plot region + # Aligning this flush with the right edge of the plot area is + # predictable and easy to code. That is easier than trying to put + # this in the lower left corner since that would likely look best + # aligned with the left edge of the axis labeling and such an alignment + # will require graph specific coordinate adjustments. xref="paper", xanchor="right", x=1, @@ -813,8 +814,8 @@ fig.update_layout( font=dict(size=12)), # We move the legend out of the right margin so the right-aligned note is # flush with the right most element of the graph. - # In this particular example, the top right corner of the graph region - # is consistently available at all screen resolutions. + # Here we put the legend in a corners of the graph region + # because it has consistent coordinates at all screen resolutions. legend=dict( yanchor="top", y=1, @@ -822,15 +823,15 @@ fig.update_layout( x=1) ) -#Repurpose an annotation to insert a title +# Repurpose an annotation to insert a title 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 this should work on most graphs + 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 is a robust approach text="This title is a Plotly annotation", - #center horizontally over the plot area + # Center the title horizontally over the plot area xref="paper", xanchor="center", x=0.5, From 335695ca0e612f6aaeda11ed031b991b89ccb460 Mon Sep 17 00:00:00 2001 From: Rob Letzler Date: Sun, 22 Dec 2024 22:44:18 -0500 Subject: [PATCH 04/11] minor writing tweaks --- doc/python/text-and-annotations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/text-and-annotations.md b/doc/python/text-and-annotations.md index eecb6c2c31e..ea5fa13628a 100644 --- a/doc/python/text-and-annotations.md +++ b/doc/python/text-and-annotations.md @@ -784,7 +784,7 @@ fig.show() ``` ### Specifying Source Lines or Figure Notes on the Bottom of a Figure -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. +Sometimes we need to include information at the bottom of the figure about the data source or interpretation. This example achieves the desired alignment in the bottom right corner using the title element and container coordinates and then 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 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 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 its bottom at a paper y-coordinate slightly greater than 1 is a reasonable title location on many graphs. ```import plotly.express as px df_iris = px.data.iris() From a72b69324576408d2fd76f6cd8e0f2168c9604d7 Mon Sep 17 00:00:00 2001 From: Rob Letzler Date: Mon, 23 Dec 2024 20:02:27 -0500 Subject: [PATCH 05/11] improved appearance --- doc/python/text-and-annotations.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/doc/python/text-and-annotations.md b/doc/python/text-and-annotations.md index ea5fa13628a..9f3fe43b2df 100644 --- a/doc/python/text-and-annotations.md +++ b/doc/python/text-and-annotations.md @@ -811,6 +811,8 @@ fig.update_layout( xanchor="right", x=1, + plot_bgcolor="white", + font=dict(size=12)), # We move the legend out of the right margin so the right-aligned note is # flush with the right most element of the graph. @@ -820,7 +822,8 @@ fig.update_layout( yanchor="top", y=1, xanchor="right", - x=1) + x=1, + borderwidth=1) ) # Repurpose an annotation to insert a title From 64e16d7a890e7f4c09afed87ced051299d10413a Mon Sep 17 00:00:00 2001 From: Rob Letzler Date: Mon, 23 Dec 2024 20:03:48 -0500 Subject: [PATCH 06/11] with bgcolor in the right place --- doc/python/text-and-annotations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/text-and-annotations.md b/doc/python/text-and-annotations.md index 9f3fe43b2df..1a8096890a5 100644 --- a/doc/python/text-and-annotations.md +++ b/doc/python/text-and-annotations.md @@ -810,10 +810,10 @@ fig.update_layout( xref="paper", xanchor="right", x=1, + font=dict(size=12)), plot_bgcolor="white", - font=dict(size=12)), # 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 corners of the graph region From 25d9a5bcbfd08c56a5c4eeec2facdf82c096542f Mon Sep 17 00:00:00 2001 From: Rob Letzler Date: Sun, 19 Jan 2025 14:05:38 -0500 Subject: [PATCH 07/11] Update text-and-annotations.md minor updates to the wording --- doc/python/text-and-annotations.md | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/doc/python/text-and-annotations.md b/doc/python/text-and-annotations.md index 1a8096890a5..cff83a3de24 100644 --- a/doc/python/text-and-annotations.md +++ b/doc/python/text-and-annotations.md @@ -784,7 +784,7 @@ fig.show() ``` ### Specifying Source Lines or Figure Notes on the Bottom of a Figure -Sometimes we need to include information at the bottom of the figure about the data source or interpretation. This example achieves the desired alignment in the bottom right corner using the title element and container coordinates and then 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 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 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 its bottom at a paper y-coordinate slightly greater than 1 is a reasonable title location on many graphs. +This example shows how to put a terse note about the data source or interpretation 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 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 in e.g. a paper coordinate 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 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 its bottom at a paper y-coordinate slightly greater than 1 is a reasonable title location on many graphs. ```import plotly.express as px df_iris = px.data.iris() @@ -794,19 +794,18 @@ fig = px.scatter(df_iris, x="sepal_width", y="sepal_length", color="species", #Use the title for the source / note line fig.update_layout( title=dict(text="Note: this is the Plotly title element.", - # keeping this short avoids getting the text cut off in small windows - # if you need longer text, consider embedding your graphic on a web page and + # 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 or - # setting the width of the graph. + # 2) using this approach and also specifying a graph width that shows the whole title. yref="container", y=0.005, - # Paper x-coordinates let us align this at either the right or left - # edge of the plot region + # The "paper" x-coordinates lets us align this with either the right or left + # edge of the plot region. # Aligning this flush with the right edge of the plot area is - # predictable and easy to code. That is easier than trying to put - # this in the lower left corner since that would likely look best - # aligned with the left edge of the axis labeling and such an alignment - # will require graph specific coordinate adjustments. + # predictable and easy to code. + # 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, @@ -816,7 +815,7 @@ fig.update_layout( # 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 corners of the graph region + # 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", @@ -826,12 +825,12 @@ fig.update_layout( borderwidth=1) ) -# Repurpose an annotation to insert a title +# 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 is a robust approach + # 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 From 8caa5d1a247ae33af55a5b2de96f49200aafb4c8 Mon Sep 17 00:00:00 2001 From: Rob Letzler <22990670+rl-utility-man@users.noreply.github.com> Date: Tue, 28 Jan 2025 22:04:09 -0500 Subject: [PATCH 08/11] changing spelling of data frame name Co-authored-by: Liam Connors --- doc/python/text-and-annotations.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/doc/python/text-and-annotations.md b/doc/python/text-and-annotations.md index cff83a3de24..13199ede69e 100644 --- a/doc/python/text-and-annotations.md +++ b/doc/python/text-and-annotations.md @@ -786,12 +786,9 @@ fig.show() This example shows how to put a terse note about the data source or interpretation 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 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 in e.g. a paper coordinate 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 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 its bottom at a paper y-coordinate slightly greater than 1 is a reasonable title location on many graphs. -```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 / note line +```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 From f34d4eda8211b022fbfea34e98e6b7d4bab95f1f Mon Sep 17 00:00:00 2001 From: Rob Letzler <22990670+rl-utility-man@users.noreply.github.com> Date: Tue, 28 Jan 2025 22:08:06 -0500 Subject: [PATCH 09/11] removed a blank line Co-authored-by: Liam Connors --- doc/python/text-and-annotations.md | 1 - 1 file changed, 1 deletion(-) diff --git a/doc/python/text-and-annotations.md b/doc/python/text-and-annotations.md index 13199ede69e..aa114716d2f 100644 --- a/doc/python/text-and-annotations.md +++ b/doc/python/text-and-annotations.md @@ -807,7 +807,6 @@ fig.update_layout( 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 From 0e5108b10ac5530b630400e112e8e9b78258bdab Mon Sep 17 00:00:00 2001 From: Rob Letzler <22990670+rl-utility-man@users.noreply.github.com> Date: Tue, 28 Jan 2025 22:08:48 -0500 Subject: [PATCH 10/11] accepting Liam's good edits Co-authored-by: Liam Connors --- doc/python/text-and-annotations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/text-and-annotations.md b/doc/python/text-and-annotations.md index aa114716d2f..920976dd747 100644 --- a/doc/python/text-and-annotations.md +++ b/doc/python/text-and-annotations.md @@ -784,7 +784,7 @@ fig.show() ``` ### Specifying Source Lines or Figure Notes on the Bottom of a Figure -This example shows how to put a terse note about the data source or interpretation 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 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 in e.g. a paper coordinate 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 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 its bottom at a paper y-coordinate slightly greater than 1 is a reasonable title location on many graphs. +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, 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 From cdc68a764b49c65180ed1d70ffe5f76406fe46ef Mon Sep 17 00:00:00 2001 From: Rob Letzler <22990670+rl-utility-man@users.noreply.github.com> Date: Tue, 28 Jan 2025 22:13:45 -0500 Subject: [PATCH 11/11] added a comment about using
to break up long lines --- doc/python/text-and-annotations.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/doc/python/text-and-annotations.md b/doc/python/text-and-annotations.md index 920976dd747..84521f34cd7 100644 --- a/doc/python/text-and-annotations.md +++ b/doc/python/text-and-annotations.md @@ -784,7 +784,7 @@ 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, so an annotation with its bottom at a paper y-coordinate slightly greater than 1 is a reasonable title location on many graphs. +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 @@ -793,14 +793,15 @@ 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 or - # 2) using this approach and also specifying a graph width that shows the whole title. + # 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
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. - # Aligning this flush with the right edge of the plot area is - # predictable and easy to code. + # 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",