standoff example

Author: LiamConnors

doc/python/marker-style.md

@@ -413,7 +413,6 @@ import pandas as pd
 import plotly.express as px
 import plotly.graph_objects as go
 
-
 df = px.data.gapminder()
 
 fig = go.Figure()
@@ -437,6 +436,81 @@ fig.show()
 
 ```
 
+### Using Standoff to Position a Marker
+
+*New in 5.11*
+
+When you have multiple markers at one location, you can use `standoff` on a marker to move it away from the other marker in the direction of the `angle`. 
+In this example, we set `standoff=8` on the `arrow` marker, which is half the size of the other `circle` marker, meaning it points exactly at the `circle`.
+
+```python
+import pandas as pd
+import plotly.graph_objects as go
+from plotly import data
+
+df = data.gapminder()
+df = df.loc[(df.continent == "Americas") & (df.year.isin([1987, 2007]))]
+
+countries = (
+    df.loc[(df.continent == "Americas") & (df.year.isin([2007]))]
+    .sort_values(by=["pop"], ascending=True)["country"]
+    .unique()
+)[5:-10]
+
+data = {"x": [], "y": [], "colors": [], "years": []}
+
+for country in countries:
+    data["x"].extend(
+        [
+            df.loc[(df.year == 1987) & (df.country == country)]["pop"].values[0],
+            df.loc[(df.year == 2007) & (df.country == country)]["pop"].values[0],
+            None,
+        ]
+    )
+    data["y"].extend([country, country, None]),
+    data["colors"].extend(["cyan", "darkblue", "white"]),
+    data["years"].extend(["1987", "2007", None])
+
+fig = go.Figure(
+    data=[
+        go.Scatter(
+            x=data["x"],
+            y=data["y"],
+            mode="markers+lines",
+            marker=dict(
+                symbol="arrow",
+                color="royalblue",
+                size=16,
+                angleref="previous",
+                standoff=8,
+            ),
+        ),
+        go.Scatter(
+            x=data["x"],
+            y=data["y"],
+            text=data["years"],
+            mode="markers",
+            marker=dict(
+                color=data["colors"],
+                size=16,
+            ),
+            hovertemplate="""Country: %{y} <br> Population: %{x} <br> Year: %{text} <br><extra></extra>""",
+        ),
+    ]
+)
+
+fig.update_layout(
+    title="Population changes 1987 to 2007",
+    width=1000,
+    height=1000,
+    showlegend=False,
+)
+
+
+fig.show()
+
+```
+
 ### Reference
 
 See https://plotly.com/python/reference/ for more information and chart attribute options!