# Graph Insets with Makie

**URL:** https://discourse.julialang.org/t/graph-insets-with-makie/66855
**Category:** Visualization
**Tags:** makie
**Created:** [August 23, 2021, 4:17pm UTC](https://discourse.julialang.org/t/graph-insets-with-makie/66855 "2021-08-23T16:17:16Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Jdbeck66](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jdbeck66/32/19399_2.png) [@Jdbeck66](https://discourse.julialang.org/u/Jdbeck66)
#### Post date: [August 23, 2021, 4:17pm UTC](https://discourse.julialang.org/t/graph-insets-with-makie/66855/1 "2021-08-23T16:17:16Z")

</div>

I’m attempting to inset a colorbar into the lower left corner of this graph using the example I found at the link below.

[https://lazarusa.github.io/BeautifulMakie/ScattersLines/LineWithInset/](https://lazarusa.github.io/BeautifulMakie/ScattersLines/LineWithInset/)

 ![nucleotide](https://global.discourse-cdn.com/julialang/original/3X/b/2/b234da919a77aa1b30e3168722dce360c927fc87.png)

```julia
f1 = Figure(resolution = (800,800))

ax1 = Axis(f1)
hidespines!(ax1)
ax2 = Axis(f1, bbox = BBox(100,300,100,200))

hm1 = heatmap(ax1, transpose(dfm), colormap = cgrad(["white","green"],9))

ax1.yreversed = true
ax1.yaxisposition = :right
ax1.yticks = (2:3:length(labels),axisticks₁)
ax1.yticklabelsize = 10

ax1.xaxisposition = :top
ax1.xticks = (2:3:length(labels),axisticks₁)
ax1.xticklabelsize = 10

cbar = Colorbar(ax2,hm1, vertical = false, ticks = 0:0.20:1)

f1

```

Produces this error:

 ![Screen Shot 2021-08-23 at 10.11.38 AM](https://global.discourse-cdn.com/julialang/original/3X/d/e/de0418e64246b1e9d77d68caf42aac98d9a8ee22.png)

My prior code and result works fine (but can’t get the colorbar where I’d like it).

```julia
f1 = Figure(resolution = (800,800))

#ax1 = Axis(f1)
#ax2 = Axis(f1, bbox = BBox(100,300,100,200))

ax1, hm1 = heatmap(f1[1,1], transpose(dfm), colormap = cgrad(["white","green"],9))
hidespines!(ax1)

ax1.yreversed = true
ax1.yaxisposition = :right
ax1.yticks = (2:3:length(labels),axisticks₁)
ax1.yticklabelsize = 10

ax1.xaxisposition = :top
ax1.xticks = (2:3:length(labels),axisticks₁)
ax1.xticklabelsize = 10

#cbar = Colorbar(ax2,hm1, vertical = false, ticks = 0:0.20:1)

f1

```

I’m wondering if the code I was modeling my visualization has some deprecated aspects to it. Haven’t been able to locate in the documentation how to use bbox to place an inset otherwise.

Thanks for any help.

Jim

---

<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: [August 23, 2021, 4:22pm UTC](https://discourse.julialang.org/t/graph-insets-with-makie/66855/2 "2021-08-23T16:22:00Z")

</div>

use the other example, which has a colorbar inside the Axis.

[https://lazarusa.github.io/BeautifulMakie/ScattersLines/LineWithInsetHeatmap/](https://lazarusa.github.io/BeautifulMakie/ScattersLines/LineWithInsetHeatmap/)

I think this should do it:

`Colorbar(fig[1,1], hmap, label = "values", height = 15, vertical = false, flipaxis = false, ticksize=15, tickalign = 1, width = Relative(3.55/4), halign = :left, valign = :bottom)`

---

<div class="post-metadata">

### Author: ![Jdbeck66](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jdbeck66/32/19399_2.png) [@Jdbeck66](https://discourse.julialang.org/u/Jdbeck66)
#### Post date: [August 23, 2021, 6:03pm UTC](https://discourse.julialang.org/t/graph-insets-with-makie/66855/3 "2021-08-23T18:03:02Z")

</div>

Thanks for the help - Got the colorbar in the correct position:

 ![Screen Shot 2021-08-23 at 11.59.11 AM](https://global.discourse-cdn.com/julialang/original/3X/f/0/f0c3c91affcb05bd51ce0f737f16d53c18a31db8.png)

But can’t get the colorbar to display the color range from the visualization:

```julia
let
    fxy = convert(Matrix{Float32},transpose(Matrix(df[:,1:length(labels)])));
    
    fig = Figure(resolution = (800,800))
    ax1 = Axis(fig)

    hmap = heatmap!(ax1, fxy, colormap = cgrad(["white","green"],9))

    hidespines!(ax1)

    ax1.yreversed = true
    ax1.yaxisposition = :right
    ax1.yticks = (2:3:length(labels),axisticks₁)
    ax1.yticklabelsize = 10

    ax1.xaxisposition = :top
    ax1.xticks = (2:3:length(labels),axisticks₁)
    ax1.xticklabelsize = 10

    cbar = Colorbar(fig[1,1], hmap, label = "Relative Fitness",
        vertical = false, flipaxis = false,
        ticksize = 10, tickalign = 1, ticks = 0:0.2:1.4,
        tellheight = false, tellwidth = false,
        width = Relative(1/2), 
        halign = :left, valign = :bottom)
    
    fig[1,1] = ax1    
    fig
end

```

JB

---

<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: [August 24, 2021, 5:33am UTC](https://discourse.julialang.org/t/graph-insets-with-makie/66855/4 "2021-08-24T05:33:50Z")

</div>

Could you check if the colors are visible if the colorbar is not on the Axis? It could be that the axis background covers it somehow. Maybe you can also change the axis backgroundcolor to transparent. Otherwise you’d need to reach into the colorbar internals and translate! the color part forward in z.

---

<div class="post-metadata">

### Author: ![Jdbeck66](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jdbeck66/32/19399_2.png) [@Jdbeck66](https://discourse.julialang.org/u/Jdbeck66)
#### Post date: [August 24, 2021, 3:47pm UTC](https://discourse.julialang.org/t/graph-insets-with-makie/66855/5 "2021-08-24T15:47:07Z")

</div>

Yes, when I place the colorbar into another grid position (like fig[2,1] - it displays nicely. I tried changing the background color to transparent (`ax1.backgroundcolor = :transparent`) without any effect.

Any recommendations on how to navigate the translate! - I understand conceptually what you are saying - but a quick look in the documentation didn’t give me a clear idea of how to navigate the internals of the colorbar to push the color up front.

Thanks for the help.

---

<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: [August 24, 2021, 7:46pm UTC](https://discourse.julialang.org/t/graph-insets-with-makie/66855/6 "2021-08-24T19:46:51Z")

</div>

Currently layoutables have no concept of z-order, because many are just loose collections of plot objects and don’t have their own scene. So in those cases your best bet is to check `obj.elements`, that is usually the dict where I save those plot objects, although it’s not official API. Then you can do `translate!(some_element, 0, 0, 100)` for example to push an object forward. It’s clunky, but it works. Probably it would be nice to formalize a z-index for layoutables exactly for these kinds of layering scenarios.

---

<div class="post-metadata">

### Author: ![Jdbeck66](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jdbeck66/32/19399_2.png) [@Jdbeck66](https://discourse.julialang.org/u/Jdbeck66)
#### Post date: [August 25, 2021, 3:47pm UTC](https://discourse.julialang.org/t/graph-insets-with-makie/66855/7 "2021-08-25T15:47:56Z")

</div>

Thanks for this. I appreciate it and the work you all have done on Makie. Looking forward to seeing this continue to evolve.

JB
