# Makie - Inset axes and their drawing order

**URL:** <https://discourse.julialang.org/t/makie-inset-axes-and-their-drawing-order/60987>\
**Category:** Visualization\
**Tags:** makie\
**Created:** [May 11, 2021, 11:41pm UTC](https://discourse.julialang.org/t/makie-inset-axes-and-their-drawing-order/60987 "2021-05-11T23:41:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kolaru](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kolaru/32/4574_2.png) [@Kolaru](https://discourse.julialang.org/u/Kolaru)\
**Post date:** [May 11, 2021, 11:41pm UTC](https://discourse.julialang.org/t/makie-inset-axes-and-their-drawing-order/60987/1 "2021-05-11T23:41:59Z")

</div>

If I understand correctly inset axes can be create rather easily in Makie by putting multiple axes in the same layout position. Something as follow:

```julia
fig = Figure(resolution=(500, 500))

# The main axis
density_ax = Axis(fig[1, 1],
    backgroundcolor=:white)

# Some function plotting stuff
plot_densities!(density_ax, momenta[:, :, end, :])

# The inset axis
inset_ax = Axis(fig[1, 1],
    width=Relative(0.5),
    height=Relative(0.5),
    halign=0.9,
    valign=0.9,
    backgroundcolor=:lightgray)

hidedecorations!(inset_ax)

# Some function plotting stuff
plot_densities!(inset_ax, momenta[:, :, end, :])

```

However it appears that the inset axis is drawn behind some elements of the main axis. For example in the following the grid and the `contourf` are drawn over the inset axis.

![image](https://global.discourse-cdn.com/julialang/original/3X/3/9/39fd1acdea5fc18fc3d9544b603a5264a5e90160.png)

I tried to change the order in which I define the axis but it didn’t change much. How could I control that such that the inset axis would cover everyting drawn on the main axis?

---

<div class="post-metadata">

**Author:** ![ffreyer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ffreyer/32/21569_2.png) [@ffreyer](https://discourse.julialang.org/u/ffreyer)\
**Post date:** [May 11, 2021, 11:58pm UTC](https://discourse.julialang.org/t/makie-inset-axes-and-their-drawing-order/60987/2 "2021-05-11T23:58:35Z")

</div>

The render order in this case is based on the z-value of each component. I’m not aware of a nice way to change this for the whole axis, but you can try this to move its components forward individually:

```julia
for (k, v) in inset_ax.elements
    if v isa AbstractPlot
        translate!(Accum, v, Vec3f0(0, 0, 200))
    else
        for (k, v2) in v.elements
            translate!(Accum, v2, Vec3f0(0, 0, 200))
        end
    end
end
translate!(Accum, inset_ax.scene, Vec3f0(0, 0, 200))

```

---

<div class="post-metadata">

**Author:** ![tomaklutfu](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tomaklutfu/32/2411_2.png) [@tomaklutfu](https://discourse.julialang.org/u/tomaklutfu)\
**Post date:** [May 12, 2021, 2:15am UTC](https://discourse.julialang.org/t/makie-inset-axes-and-their-drawing-order/60987/3 "2021-05-12T02:15:54Z")

</div>

It seems like it comes from transparency of inset plot but I do not know enough about it to change alpha value of colors.

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [May 12, 2021, 5:35am UTC](https://discourse.julialang.org/t/makie-inset-axes-and-their-drawing-order/60987/4 "2021-05-12T05:35:58Z")

</div>

Maybe it’s easier to translate the scene of the outer axis backwards, and probably also the grid lines. But otherwise like @ffreyer said.

---

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [May 12, 2021, 12:30pm UTC](https://discourse.julialang.org/t/makie-inset-axes-and-their-drawing-order/60987/5 "2021-05-12T12:30:32Z")

</div>

You need to handle the background rect:

```julia
fig = Figure(resolution=(500, 500))

# The main axis
density_ax = Axis(fig[1, 1],
    backgroundcolor=:white)

# Some function plotting stuff
density!(density_ax, rand(1000))

# The inset axis
inset_ax = Axis(fig[1, 1],
    width=Relative(0.5),
    height=Relative(0.5),
    halign=0.9,
    valign=0.9,
    backgroundcolor=:lightgray)
hidedecorations!(inset_ax)
translate!(inset_ax.scene, 0, 0, 10)
# this needs separate translation as well, since it's drawn in the parent scene
translate!(inset_ax.elements[:background], 0, 0, 9)
scatter!(inset_ax, 0..1, rand(4))
fig

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/7/9/79316d489028d4f8c6b81569dd9bc6fde7979ea9.png)

So this works 😉

Maybe we can give the axis constructor a Z-index keyword argument, to make this easier!

---

<div class="post-metadata">

**Author:** ![Kolaru](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kolaru/32/4574_2.png) [@Kolaru](https://discourse.julialang.org/u/Kolaru)\
**Post date:** [May 13, 2021, 2:42pm UTC](https://discourse.julialang.org/t/makie-inset-axes-and-their-drawing-order/60987/6 "2021-05-13T14:42:47Z")

</div>

Translating background and scene work just fine, thanks a lot.

> Maybe we can give the axis constructor a Z-index keyword argument, to make this easier!

I think that would be sufficient to make Makie one of the plotting library with the most streamlined inset axis workflow 🙂