# Fill a bounding box behind text in Makie

**URL:** https://discourse.julialang.org/t/fill-a-bounding-box-behind-text-in-makie/101502
**Category:** Visualization
**Tags:** question, plotting, makie
**Created:** [July 12, 2023, 12:30am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-behind-text-in-makie/101502 "2023-07-12T00:30:07Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![garrek](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/garrek/32/27937_2.png) [@garrek](https://discourse.julialang.org/u/garrek)
#### Post date: [July 12, 2023, 12:30am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-behind-text-in-makie/101502/1 "2023-07-12T00:30:07Z")

</div>

Is there now a way to fill a text bounding box? This question was asked a couple of years ago, but there was not a direct implementation at that time and a lot has changed since then.

Basically, what I’d like to do is have a box of arbitrary dimension surrounding either a `text!` object, `Label`, or similar object and choose the border color and line width, as well as the fill color.

One solution might be just to draw a `Box` and then draw the text on top. But I’m having issues with aligning the box with the text and also making sure the box is behind the text.

> [@Fill a bounding box of a text in Makie](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640):
>
> I’d like to add background color to a text object in a Makie plot – fill the bounding box of the text with some color. If I understood it correctly, text does not have a size property, so bb here has size zero: t = text!(scene, "text") bb = boundingbox(t) Is there some way to accomplish this? Background: I’m plotting circles with specific radii, and I want to add a text label on the edge of each circle with its radius. The problem is that the edge of the circle is visible through the text, a…

---

<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: [July 12, 2023, 8:01am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-behind-text-in-makie/101502/2 "2023-07-12T08:01:50Z")

</div>

Not directly, yet. But you can use the `Box` way with a slight workaround usually, which is to put the box and the label inside their own little GridLayout. The GridLayout itself, and therefore also the Box, will shrink to the Label size plus padding, then you can move it around using align. `tellwidth` and `tellheight` false on the layout means the big layout will not shrink to its size, depending on what you want you might enable that though.

```julia
 f = Figure()
 gl = GridLayout(f[1, 1], tellwidth = false, tellheight = false, halign = :right, valign = :bottom)
 Box(gl[1, 1], color = :bisque, strokecolor = :black, strokewidth = 2)
 Label(gl[1, 1], "A Label\nin a Box", padding = (10, 10, 10, 10))
 Axis(f[1, 2])
 Axis(f[2, 1])
 Axis(f[2, 2])
 f

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/2/6/26efe6080c692dbcbdf63acf497d6eed43cd615b.png)

---

<div class="post-metadata">

### Author: ![garrek](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/garrek/32/27937_2.png) [@garrek](https://discourse.julialang.org/u/garrek)
#### Post date: [July 13, 2023, 12:03am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-behind-text-in-makie/101502/3 "2023-07-13T00:03:42Z")

</div>

Thanks! That worked reasonably well. Is there a way to float the box slightly above the bottom? It would be nice to have it float instead of attached to the axis.

I can’t share my data, but I whipped up an example demonstrating the type of data I’m working with and the kind of plots I’m making (two-dimensional infrared spectroscopy (2DIR)) for others to try.

Note: I’m using some custom theming on my macOS retina display ([package here](https://github.com/garrekstemo/SomeMakieThemes.jl)) so your font sizing, etc. will be different.

```julia
using GLMakie
# using SomeMakieThemes
GLMakie.activate!(inline=false)
# set_theme!(theme_manuscript_retina())

function lorentz2d(x, y, A, ω_0, Γ)
    data = zeros(length(x), length(y))
    for i in eachindex(x)
        for j in eachindex(y)
            data[i, j] = A * Γ ./ ((x[i] .- ω_0) .^2 + (y[j]) .^2 .+ Γ^2)
        end
    end
    data
end

x = -10:0.5:10
y = -10:0.5:10
Γ = 2
A = 40
ω1 = -2
ω2 = 2
z = lorentz2d(x, y, A, ω1, Γ) .- lorentz2d(x, y, A, ω2, Γ) .+ 0.05 * randn(length(x), length(y))

fig = Figure()
DataInspector()

ax = Axis(fig[1, 1], xlabel = "Probe frequency (arb.)", ylabel = "Pump frequency (arb.)", 
    xticks = x[1]:2:x[end],
    yticks = y[1]:2:y[end],
    )
colsize!(fig.layout, 1, Aspect(1, 1.0))
gl = GridLayout(fig[1, 1], 
    tellwidth = false, 
    tellheight = false, 
    halign = :center, 
    valign = :bottom,
    )

levels = minimum(z)-2:2:maximum(z)+2
ct = contourf!(x, y, z, levels=levels, colormap = :RdBu)
contour!(x, y, z, levels=levels, linewidth = 0.5, color = :black)
Colorbar(fig[0, 1], ct, label = "Intensity (arb.)",
    ticks = [-17, 0, 15],
    vertical = false,
    ticksvisible = false
    )
xlims!(ax, -7, 7)
ylims!(ax, -7, 7)

Box(gl[1, 1], color = :white, strokecolor = :black, strokewidth = 2)
Label(gl[1, 1], "10 ps",
    fontsize = 42,
    padding = (10, 10, 20, 20),
    )

resize_to_layout!(fig)
fig
# save("lorentz2DIR.png", fig,)

```

 ![lorentz2dir](https://global.discourse-cdn.com/julialang/original/3X/f/4/f4bd9525d1d07412a5dabd36f39f1be816bebfce.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: [July 13, 2023, 5:26am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-behind-text-in-makie/101502/4 "2023-07-13T05:26:53Z")

</div>

You could either set it fractionally like `valign = 0.05` on the GridLayout or by giving it a padding like `alignmode = Outside(10)`

---

<div class="post-metadata">

### Author: ![garrek](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/garrek/32/27937_2.png) [@garrek](https://discourse.julialang.org/u/garrek)
#### Post date: [July 13, 2023, 9:16am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-behind-text-in-makie/101502/5 "2023-07-13T09:16:42Z")

</div>

Ah yes, that works well. Thanks!

---

<div class="post-metadata">

### Author: ![garrek](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/garrek/32/27937_2.png) [@garrek](https://discourse.julialang.org/u/garrek)
#### Post date: [July 13, 2023, 10:42pm UTC](https://discourse.julialang.org/t/fill-a-bounding-box-behind-text-in-makie/101502/6 "2023-07-13T22:42:32Z")

</div>

Do you think this will be implemented directly in the near future? If not, I can write up an example for the Makie docs showing how to implement this workaround.

---

<div class="post-metadata">

### Author: ![kongdd](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kongdd/32/17058_2.png) [@kongdd](https://discourse.julialang.org/u/kongdd)
#### Post date: [May 6, 2025, 3:15pm UTC](https://discourse.julialang.org/t/fill-a-bounding-box-behind-text-in-makie/101502/7 "2025-05-06T15:15:57Z")

</div>

Any idea how to construct GridLayout from `ax` other than `fig[1, 1]`?

---

<div class="post-metadata">

### Author: ![garrek](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/garrek/32/27937_2.png) [@garrek](https://discourse.julialang.org/u/garrek)
#### Post date: [May 7, 2025, 1:34am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-behind-text-in-makie/101502/8 "2025-05-07T01:34:13Z")

</div>

This should probably be a separate topic, but I’m not quite sure what you mean. Have you checked the docs for [GridLayout](https://docs.makie.org/v0.22/tutorials/layout-tutorial) and the tutorial on [creating complex layouts](https://docs.makie.org/v0.22/tutorials/layout-tutorial)?

---

<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 7, 2025, 6:16am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-behind-text-in-makie/101502/9 "2025-05-07T06:16:07Z")

</div>

As a note to future readers, the just merged [`textlabel` recipe](https://github.com/MakieOrg/Makie.jl/pull/4879) should be an easier way to do this inside an `Axis`, inside a layout the `Box` approach is still better currently.
