# Makie: heatmap with inset

**URL:** <https://discourse.julialang.org/t/makie-heatmap-with-inset/78372>\
**Category:** Visualization\
**Tags:** makie\
**Created:** [March 24, 2022, 7:13am UTC](https://discourse.julialang.org/t/makie-heatmap-with-inset/78372 "2022-03-24T07:13:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Salmon](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/salmon/32/22968_2.png) [@Salmon](https://discourse.julialang.org/u/Salmon)\
**Post date:** [March 24, 2022, 7:13am UTC](https://discourse.julialang.org/t/makie-heatmap-with-inset/78372/1 "2022-03-24T07:13:18Z")

</div>

Hi everyone,  
I am trying to plot an inset inside of a heatmap and would like a semi-transparent background for the inset to make the line more visible.  
However, it seems that all “background” attributes (i.e. axis ticks and background coloring) of the inset are overruled by the heatmap plot.  
Here is a MWE that shows this problem, as you can see in the plot below, the inset actually works but its attributes need to be moved to the top layer.  
How can this be done?

```julia
using CairoMakie
x = y = -5:1:5
z = [x^2 + y^2 for x in x, y in y]
fig = Figure(resolution = (600, 400))
ax = Axis(fig[1, 1]; aspect = 1)
hmap = heatmap!(x, y, z,)

inset_ax = Axis(fig[1,1],
    width=Relative(0.8),
    height=Relative(0.2),
    halign=0.5,
    valign=0.1,backgroundcolor = (:red,0.4)
    )

lines!(inset_ax,1:10
)
display(fig)

```

![image](https://global.discourse-cdn.com/julialang/original/3X/8/5/85b7b7d9a9a8acf81816a1391e5c377bf1f07a05.png)

---

<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:** [March 24, 2022, 8:09am UTC](https://discourse.julialang.org/t/makie-heatmap-with-inset/78372/2 "2022-03-24T08:09:03Z")

</div>

Here is a description how to achieve that currently [Layouts - Julia Data Science](https://juliadatascience.io/makie_layouts#inset-plots)

There is no global z-shift attribute for Axis that would make it easier, so a little bit of manual work is currently required to layer everything correctly.

---

<div class="post-metadata">

**Author:** ![Salmon](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/salmon/32/22968_2.png) [@Salmon](https://discourse.julialang.org/u/Salmon)\
**Post date:** [March 24, 2022, 8:51am UTC](https://discourse.julialang.org/t/makie-heatmap-with-inset/78372/3 "2022-03-24T08:51:03Z")

</div>

thanks, this solves the problem partially, althought the tick labels are still hidden behind the heatmap plot:  
Any idea what can be done about this?  
 ![image](https://global.discourse-cdn.com/julialang/original/3X/8/c/8c611c4b01a7eba461e6ab8631c364973d762209.png)

---

<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:** [March 24, 2022, 9:29am UTC](https://discourse.julialang.org/t/makie-heatmap-with-inset/78372/4 "2022-03-24T09:29:01Z")

</div>

Ah I see the axis decorations were not translated, try like this:

```julia
function inset_axis!(fig, ax; z = 300, extent = (0.25, 0.75, 0.25, 0.75), axis_kwargs...)

    bbox = lift(ax.scene.px_area) do pxa
        _l, _b = minimum(pxa)
        _r, _t = maximum(pxa)
        l = _l + extent[1] * (_r - _l)
        r = _l + extent[2] * (_r - _l)
        b = _b + extent[3] * (_t - _b)
        t = _b + extent[4] * (_t - _b)
        BBox(l, r, b, t)
    end

    inset_ax = Axis(fig, bbox=bbox; axis_kwargs...)

    translate_forward!(x::Makie.Transformable, z) = translate!(Accum, x, 0, 0, z)
    translate_forward!(ax::MakieLayout.LineAxis, z) = foreach(x -> translate_forward!(x, z), values(ax.elements))
    translate_forward!(_) = nothing

    foreach(x -> translate_forward!(x, z), values(inset_ax.elements))
    translate!(Accum, inset_ax.scene, 0, 0, z)
    
    return inset_ax
end

```

```julia
f, ax, hm = heatmap(randn(10, 10), colormap = :Blues)
ax2 = inset_axis!(f, ax)
lines!(ax2, cumsum(randn(100)))
ax3 = inset_axis!(f, ax2, extent = (0, 0.5, 0, 1), z = 500, alignmode = Outside(10))
lines!(ax3, cumsum(randn(100)), color = Cycled(2))
f

```

 ![grafik](https://global.discourse-cdn.com/julialang/original/3X/d/6/d6a41c5cde97df68fd276a4219e744a65c9543f0.png)

---

<div class="post-metadata">

**Author:** ![Salmon](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/salmon/32/22968_2.png) [@Salmon](https://discourse.julialang.org/u/Salmon)\
**Post date:** [March 24, 2022, 11:50am UTC](https://discourse.julialang.org/t/makie-heatmap-with-inset/78372/5 "2022-03-24T11:50:33Z")

</div>

> [@jules](#):
>
> ```julia
> inset_axis!(f, ax2, extent = (0, 0.5, 0, 1), z = 500, alignmode = Outside(10))
> lines!(ax3, cumsum(randn(100)), color = Cycled(2))
> 
> ```

Thank you for sharing this helper function, it works beautifully now!