Arrows in plotly python

Question

I would like to add arrows to plotly figure. I looked at this question Draw multiple arrows using plotly python but I do not understand how to apply that. I tried this:

import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

d = {'a': [1, 2, 2], 'b': [3, 5, 4], 'c': [0.1, 0.2, 0.6]}
df = pd.DataFrame(data=d)

fig = px.scatter(df, x='a', y='b', error_y='c')
fig.update_xaxes(title_font_family="Trebuchet")

layout = go.Layout(
yaxis=dict(scaleanchor="x", scaleratio=1),
    template = "plotly_white",
    title="<b>V</b>",
)

fig.layout = layout
fig.update_layout(
    xaxis = dict(autorange="reversed")
)
##################
arrow = go.layout.Annotation(dict(
                x= x_end,
                y= y_end,
                xref="x", yref="y",
                text="",
                showarrow=True,
                axref = "x", ayref='y',
                ax= x_start,
                ay= y_start,
                arrowhead = 3,
                arrowwidth=1.5,
                arrowcolor='rgb(255,51,0)',)
            )

x_end = [1, 2, 4]
y_end = [6, 5, 6]

fig.update_layout(
annotations= dict(x_end, y_end,))

###################
fig.write_html("Fig.html")
fig.show()

The part in #### is not working. I would like to add arrows from the points in the scatter to the points with coordinates in x_end and y_end.

Thank you so much

Hi @Elena - it isn't very clear what you are trying to do? Perhaps explain where you want the arrows to be? Pointing at each scatter plot point? — Redox, Sep 08 '22 at 16:54
I would like arrows pointing from the points in the scatter to the point x_end[i], y_end[i], I explained that better. Is it sufficient? — Elena Greg, Sep 08 '22 at 19:15

score 2 · Accepted Answer · answered Sep 09 '22 at 02:55

The response you are referring to may be difficult to understand because it is a partial code. You can efficiently add multiple arrows by adding a single arrow setting to the list. x,y is the end point of the arrow and ax,ay is the start point of the arrow. I have modified some of the data presented and added the data to draw the arrows along with the points on the scatterplot.

fig = px.scatter(df, x='a', y='b', error_y='c')

fig.update_xaxes(title_font_family="Trebuchet")
fig.update_layout(yaxis=dict(scaleanchor="x", scaleratio=1),
                  template = "plotly_white",
                  title="<b>V</b>",
                 )
fig.update_layout(xaxis = dict(autorange="reversed"))

x_end = [1, 2, 2]
y_end = [3, 5, 4]
x_start = [0, 1, 3]
y_start = [4, 4, 4]

list_of_all_arrows = []
for x0,y0,x1,y1 in zip(x_end, y_end, x_start, y_start):
    arrow = go.layout.Annotation(dict(
                    x=x0,
                    y=y0,
                    xref="x", yref="y",
                    text="",
                    showarrow=True,
                    axref="x", ayref='y',
                    ax=x1,
                    ay=y1,
                    arrowhead=3,
                    arrowwidth=1.5,
                    arrowcolor='rgb(255,51,0)',)
                )
    list_of_all_arrows.append(arrow)

fig.update_layout(annotations=list_of_all_arrows)
# fig.write_html("Fig.html")
fig.show()

Arrows in plotly python

1 Answers1