# Visual connection between different axes in Makie.jl

**URL:** <https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535>\
**Category:** Visualization\
**Tags:** makie, cairomakie\
**Created:** [July 2, 2024, 5:00pm UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535 "2024-07-02T17:00:24Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![albertomercurio](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/albertomercurio/32/27051_2.png) [@albertomercurio](https://discourse.julialang.org/u/albertomercurio)\
**Post date:** [July 2, 2024, 5:00pm UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/1 "2024-07-02T17:00:24Z")

</div>

Hello,

I have a figure generated with CairoMakie.jl. This figure contains two axes, something like

```julia

fig = Figure(size=(380, 220))

ax1 = Axis(fig[1, 1])
ax2 = Axis(fig[2, 1])

```

Now, I want to draw some lines (or even better a polygon with a filled color) between a point in ax1 and a point in ax2, but I don’t know how to do it.

Moreover, is it possible to directly link a point in ax1 to the upper corners of ax2?

---

<div class="post-metadata">

**Author:** ![\_bernhard](https://avatars.discourse-cdn.com/v4/letter/_/bc79bd/32.png) [@\_bernhard](https://discourse.julialang.org/u/_bernhard)\
**Post date:** [July 2, 2024, 6:57pm UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/2 "2024-07-02T18:57:54Z")

</div>

There may be an easier way that I am not aware of, but when I did something similar in the past, I calculated the pixel-space coordinates of all involved points and plotted to the scene underlying the figure.  
If noone else chimes in I can share my code in the coming days.  
For your second question: what do mean by linking? Drawing a connecting line?

---

<div class="post-metadata">

**Author:** ![albertomercurio](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/albertomercurio/32/27051_2.png) [@albertomercurio](https://discourse.julialang.org/u/albertomercurio)\
**Post date:** [July 2, 2024, 7:40pm UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/3 "2024-07-02T19:40:16Z")

</div>

Yes, I mean just a simple line. More or less like an inset zoom effect, where the zoomed area is plotted in another axis

---

<div class="post-metadata">

**Author:** ![JonasWickman](https://avatars.discourse-cdn.com/v4/letter/j/9de0a6/32.png) [@JonasWickman](https://discourse.julialang.org/u/JonasWickman)\
**Post date:** [July 2, 2024, 8:00pm UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/4 "2024-07-02T20:00:18Z")

</div>

You can embed your two axes in a bigger axis like so:

```julia
using GLMakie 

fig = Figure()
gl = GridLayout(fig[1,1])
ax = Axis(fig[1,1])
xlims!(ax, 0, 1)
ylims!(ax, 0, 1)
ax1 = Axis(gl[1,1])
ax2 = Axis(gl[2,1])
hidedecorations!(ax)
hidespines!(ax)
scatterlines!(ax, [0.2,0.7] , [0.2,0.7]; overdraw = true)
fig

```

![overdraw](https://global.discourse-cdn.com/julialang/original/3X/d/2/d2fd5f442f0ddd3c871d708fda01d12ba0498da3.png)

I’ve never quite been able to figure out how to get all the coordinates of the subaxes without manually specifying them upfront though.

---

<div class="post-metadata">

**Author:** ![albertomercurio](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/albertomercurio/32/27051_2.png) [@albertomercurio](https://discourse.julialang.org/u/albertomercurio)\
**Post date:** [July 3, 2024, 7:06am UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/5 "2024-07-03T07:06:15Z")

</div>

Ok this is a way. But I need the precise position of the end points. The first one has to be one point in ax1 and the second one has to be the upper-left corner of ax2 for example.

---

<div class="post-metadata">

**Author:** ![lazarusA](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lazarusa/32/6571_2.png) [@lazarusA](https://discourse.julialang.org/u/lazarusA)\
**Post date:** [July 3, 2024, 7:20am UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/6 "2024-07-03T07:20:29Z")

</div>

I did something similar here: [Beautiful Makie](https://beautiful.makie.org/dev/examples/datavis/leos#leos)

with

```Julia
function posFig(ax, x; yoff=100, ylow = 15)
    o = ax.scene.viewport[].origin - Point2f(0, yoff)
    return Makie.project(ax.scene, Point2f(x, ylow)) + o
end

```

maybe you will need to do some minor changes.

---

<div class="post-metadata">

**Author:** ![albertomercurio](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/albertomercurio/32/27051_2.png) [@albertomercurio](https://discourse.julialang.org/u/albertomercurio)\
**Post date:** [July 3, 2024, 9:20pm UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/7 "2024-07-03T21:20:48Z")

</div>

Thanks!

I was able to do it by changing a bit your function and plotting the lines in the `fig.scene`, just like the link you gave me.

---

<div class="post-metadata">

**Author:** ![lazarusA](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lazarusa/32/6571_2.png) [@lazarusA](https://discourse.julialang.org/u/lazarusA)\
**Post date:** [July 3, 2024, 9:42pm UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/8 "2024-07-03T21:42:54Z")

</div>

glad to read, please consider contributing here with a MWE of your solution, so that others can benefit in the future!

---

<div class="post-metadata">

**Author:** ![albertomercurio](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/albertomercurio/32/27051_2.png) [@albertomercurio](https://discourse.julialang.org/u/albertomercurio)\
**Post date:** [July 13, 2024, 3:00pm UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/9 "2024-07-13T15:00:42Z")

</div>

```julia

using CairoMakie

function posFig(ax, x, y)
    o = ax.scene.viewport[].origin
    return Makie.project(ax.scene, Point2f(x, y)) + o
end

fig = Figure()
ax1 = Axis(fig[1, 1:3])
ax2 = Axis(fig[2, 1])
ax3 = Axis(fig[2, 2])
ax4 = Axis(fig[2, 3])

pts1 = [posFig(ax1, 5, 2), posFig(ax2, 5, 5)]
pts2 = [posFig(ax1, 5, 2), posFig(ax3, 5, 5)]
pts3 = [posFig(ax1, 5, 2), posFig(ax4, 5, 5)]

lines!(fig.scene, getindex.(pts1, 1), getindex.(pts1, 2))
lines!(fig.scene, getindex.(pts2, 1), getindex.(pts2, 2))
lines!(fig.scene, getindex.(pts3, 1), getindex.(pts3, 2))

fig

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/3/4/340ec0cce4cff776dc48ae9053f79c8467173336.png)

---

<div class="post-metadata">

**Author:** ![japhir](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@japhir](https://discourse.julialang.org/u/japhir)\
**Post date:** [September 6, 2024, 2:01pm UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/10 "2024-09-06T14:01:29Z")

</div>

Is there any way to make this work for GLMakie? In the initial plot it works, but once I zoom in on one of the axes the lines stay in screen-space and are thus no longer in the correct location.

---

<div class="post-metadata">

**Author:** ![ederag](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ederag/32/4106_2.png) [@ederag](https://discourse.julialang.org/u/ederag)\
**Post date:** [September 7, 2024, 9:25pm UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/11 "2024-09-07T21:25:08Z")

</div>

The following version (incremented from the previous solutions)  
updates interactively, using [observables](https://docs.makie.org/stable/explanations/observables):

```julia
using GLMakie

function pos_fig_obs(ax, x, y)
	lift(ax.scene.viewport, ax.finallimits) do vp, lims
		Makie.project(ax.scene, Point2f(x, y)) + vp.origin
	end
end

let
	fig = Figure()
	ax1 = Axis(fig[1, 1]; xticks = 0:10, yticks=0:10)
	ax2 = Axis(fig[2, 1]; xticks = 0:10, yticks=0:10)

	pos_fig_1 = pos_fig_obs(ax1, 1.0, 2.0)
	pos_fig_2 = pos_fig_obs(ax2, 3.0, 4.0)
	pts = @lift [$pos_fig_1, $pos_fig_2]

	lines!(fig.scene, pts)

	fig
end

```

But the positions can be a bit off if the mouse moves too fast  
Here is an extreme case (after playing with zoom and pan):  
 ![Screenshot_20240907_221338](https://global.discourse-cdn.com/julialang/original/3X/4/9/490dfc72df86d8f76bf0a84d698795ff94c0d7f5.png)

This is probably because [`Makie.project`](https://github.com/MakieOrg/Makie.jl/blob/86177428baa835d88ee733d4be57b5340de70053/src/camera/projection_math.jl#L371-L383) is called a bit later,  
and thus may get observable values that are inconsistent with `vp.origin`.

As a workaround, slowing down the mouse at the end of the movement helps.

---

<div class="post-metadata">

**Author:** ![Datseris](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/datseris/32/13406_2.png) [@Datseris](https://discourse.julialang.org/u/Datseris)\
**Post date:** [October 21, 2025, 3:10pm UTC](https://discourse.julialang.org/t/visual-connection-between-different-axes-in-makie-jl/116535/12 "2025-10-21T15:10:54Z")

</div>

Thanks so mucH!!! please put this in the online Makie docs i can’t believe I’ve spent more than an hour trying to achieve something so simple!!!