Draw a line between data points of different subplots

šŸ“Š Plotly Python
1

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?

2

@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:

plot-lines-between-subplots
plot-lines-between-subplots.png700Ɨ450 8.31 KB

2 Likes
3

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?

4

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?

5

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.

1 Like