Draw a line between data points of different subplots

[stonator]

Is there any way to draw a line from a data point in one subplot to a data point in another subplot?
This is what matplotlib’s ConnectionPatch essentially does: https://matplotlib.org/3.1.1/gallery/userdemo/connect_simple01.html#sphx-glr-gallery-userdemo-connect-simple01-py

Here’s my code:

fig = make_subplots(rows=2, cols=1, shared_xaxes=True)

fig.add_trace(go.Scatter(y=np.arange(10)), row=1, col=1)
fig.add_trace(go.Scatter(y=np.ones(10) * 5), row=2, col=1)

fig.update_layout(
    shapes=[dict(type="line",
                 xref='x1',
                 yref='y1',
                 x0=1,
                 y0=0,
                 x1=1,
                 y1=2,
                 line=dict(color="Purple",
                           width=3),
                 ),
            ],
)

Is there a way to set the xref of x0 to ‘x1’ and the xref of x1 to ‘x2’, and the same for y?

[empet]

@stonator, It is possible to draw such a line with xref='paper', yref='paper', after you define a custom function that converts (x1, y1), respectively (x2, y2)–cordinates of points into paper coordinates. To do this you have to set, xaxis_range, yaxis_range for each subplot. The domain is displayed by fig.layout.
Chaining a few cartesian coordinates changes you get (xpaper, ypaper)-coordinates.

With this modification of your code (and by trial and error, not by defining and calling a function as I said above):

fig.update_layout(width=650,
    shapes=[dict(type="line",
                 xref='paper',
                 yref='paper',
                 x0=0.156,
                 y0=0.65,
                 x1=0.156,
                 y1=0.21,
                 line=dict(color="Purple",
                           width=3),
                 ),
            ],
)

I have drawn such a line:

[stonator]

Thanks for your answer, @empet!

I’ve also thought about this workaround.
When zooming in, however, the connection lines are not updated to the new position of the data points.

Any other ideas? Is it possible to do this with JavaScript?

[deufl30]

is there any update on this issue?

I am trying to draw annotations between shapes of different subplots. Any idea how to connect the shapes and keep the connections after zooming in?

[AIMPED]

Hi @deufl30, I don’t think that there is something built-in, but if you could post a MRE, someone might come up with a workaround.

How to write a Minimal Reproducible Example (MRE)

Adding a minimal reproducible example to your questions will help attract community members to answer your question. The goal of writing a MRE is to allow other members of the community to run the code on their computers and “reproduce” the error, so that they can best help you. Please make sure that your MRE includes data and that the code is correctly pre-formatted. To preformat, copy and paste the code in your post and then click on </> (Preformatted text), as shown on the image: [pre-for…