add text annotation example

Author: LiamConnors

Diff for: doc/python/text-and-annotations.md

@@ -6,7 +6,7 @@ jupyter:
       extension: .md
       format_name: markdown
       format_version: '1.3'
-      jupytext_version: 1.16.2
+      jupytext_version: 1.16.3
   kernelspec:
     display_name: Python 3 (ipykernel)
     language: python
@@ -20,7 +20,7 @@ jupyter:
     name: python
     nbconvert_exporter: python
     pygments_lexer: ipython3
-    version: 3.10.0
+    version: 3.10.14
   plotly:
     description: How to add text labels and annotations to plots in python.
     display_as: file_settings
@@ -131,7 +131,7 @@ Here is a bar chart with the default behavior which will scale down text to fit.
 import plotly.express as px
 
 df = px.data.gapminder(year=2007)
-fig = px.bar(df, x='continent', y='pop', color="lifeExp", text='country', 
+fig = px.bar(df, x='continent', y='pop', color="lifeExp", text='country',
              title="Default behavior: some text is tiny")
 fig.update_traces(textposition='inside')
 fig.show()
@@ -143,7 +143,7 @@ Here is the same figure with uniform text applied: the text for all bars is the
 import plotly.express as px
 
 df = px.data.gapminder(year=2007)
-fig = px.bar(df, x='continent', y='pop', color="lifeExp", text='country', 
+fig = px.bar(df, x='continent', y='pop', color="lifeExp", text='country',
              title="Uniform Text: min size is 8, hidden if can't fit")
 fig.update_traces(textposition='inside')
 fig.update_layout(uniformtext_minsize=8, uniformtext_mode='hide')
@@ -448,7 +448,7 @@ fig.show()
 
 ## Text Case
 
-**New in 5.23**
+*New in 5.23*
 
 You can configure text case using the `textfont.textcase` property. In this example, we set `textfont.textcase="upper"` to transform the text on all bars to uppercase.
 
@@ -462,17 +462,17 @@ grouped = df[df.year == 2007].loc[df[df.year == 2007].groupby('continent')['life
 
 fig = go.Figure(
     data=go.Bar(
-        x=grouped['lifeExp'], 
-        y=grouped['continent'], 
+        x=grouped['lifeExp'],
+        y=grouped['continent'],
         text=grouped['country'],
         orientation='h',
         textfont=dict(
             family="sans serif",
             size=14,
-            # Here we set textcase to "upper. 
+            # Here we set textcase to "upper.
             # Set to lower" for lowercase text, or "word caps" to capitalize the first letter of each word
             textcase="upper"
-            
+
         )
     ),
     layout=go.Layout(
@@ -486,9 +486,9 @@ fig.show()
 
 ## Text Lines
 
-**New in 5.23**
+*New in 5.23*
 
-You can add decoration lines to text using the `textfont.lineposition` property. This property accepts `"under"`, `"over"`, and `"through"`, or a combination of these separated by a `+`. 
+You can add decoration lines to text using the `textfont.lineposition` property. This property accepts `"under"`, `"over"`, and `"through"`, or a combination of these separated by a `+`.
 
 ```python
 import plotly.graph_objects as go
@@ -500,12 +500,12 @@ grouped = df[df.year == 2002].loc[df[df.year == 2002].groupby('continent')['life
 
 fig = go.Figure(
     data=go.Bar(
-        x=grouped['lifeExp'], 
-        y=grouped['continent'], 
+        x=grouped['lifeExp'],
+        y=grouped['continent'],
         text=grouped['country'],
         orientation='h',
-        marker_color='MediumSlateBlue', 
-        textfont=dict(          
+        marker_color='MediumSlateBlue',
+        textfont=dict(
             lineposition="under" # combine different line positions with a "+" to add more than one: "under+over"
         )
     ),
@@ -520,7 +520,7 @@ fig.show()
 
 ## Text Shadow
 
-**New in 5.23**
+*New in 5.23*
 
 You can apply a shadow effect to text using the `textfont.shadow` property. This property accepts shadow specifications in the same format as the [text-shadow CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).
 
@@ -534,8 +534,8 @@ grouped = df[df.year == 1997].loc[df[df.year == 1997].groupby('continent')['life
 
 fig = go.Figure(
     data=go.Bar(
-        x=grouped['lifeExp'], 
-        y=grouped['continent'], 
+        x=grouped['lifeExp'],
+        y=grouped['continent'],
         text=grouped['country'],
         orientation='h',
         textfont=dict(
@@ -653,6 +653,54 @@ fig.update_layout(
 fig.show()
 ```
 
+### HTML Tags in Text
+
+The `text` attribute supports the following HTML tags: `<br>`,`<b>`,`<a>`, `<em>`, `<sup>` and `<span>`.
+In version 5.23 and later, `<s>` and `<u>`are also supported.
+
+```python
+import plotly.graph_objects as go
+
+fig = go.Figure(
+    data=[
+        go.Scatter(
+            x=[0, 1, 2, 3, 4, 5, 6, 7, 8],
+            y=[0, 1, 3, 2, 4, 3, 4, 6, 5],
+            mode="lines+markers",
+            name="Series 1",
+        ),
+        go.Scatter(
+            x=[0, 1, 2, 3, 4, 5, 6, 7, 8],
+            y=[0, 4, 5, 1, 2, 2, 3, 4, 2],
+            mode="lines+markers",
+            name="Series 2",
+        ),
+    ],
+    layout=go.Layout(
+        annotations=[
+            dict(
+                x=2,
+                y=5,
+                text="Text annotation using <b>bolded text</b>, <i>italicized text</i>, <u>underlined text</u>, <br>and a new line",
+                showarrow=True,
+                arrowhead=1,
+            ),
+            dict(
+                x=4,
+                y=4,
+                text="Text annotation with <a href='https://dash.plotly.com'>a link</a>.",
+                showarrow=False,
+                yshift=10,
+            ),
+        ],
+        showlegend=False,
+    ),
+)
+
+fig.show()
+
+```
+
 ### Positioning Text Annotations Absolutely
 
 By default, text annotations have `xref` and `yref` set to `"x"` and `"y"`, respectively, meaning that their x/y coordinates are with respect to the axes of the plot. This means that panning the plot will cause the annotations to move. Setting `xref` and/or `yref` to `"paper"` will cause the `x` and `y` attributes to be interpreted in [paper coordinates](/python/figure-structure/#positioning-with-paper-container-coordinates-or-axis-domain-coordinates).