# Fill a bounding box of a text in Makie

**URL:** https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640
**Category:** Visualization
**Tags:** question, makie
**Created:** [May 6, 2021, 10:47am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640 "2021-05-06T10:47:14Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [May 6, 2021, 10:47am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640/1 "2021-05-06T10:47:14Z")

</div>

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:

```julia
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, and I’d like the text to obscure the edge of the circle behind it, all to improve readability. Kind of like:  
 ![screenshot_2021-05-06_12:46:30](https://global.discourse-cdn.com/julialang/original/3X/4/9/49b990ba75425cf546dbf94580d819a662ba346b.jpeg)

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [May 6, 2021, 10:54am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640/2 "2021-05-06T10:54:43Z")

</div>

I now realize that this might not be simple/easy as attested by

> [@Makie.jl: Plotting contour with fillrange=true above lines](https://discourse.julialang.org/t/makie-jl-plotting-contour-with-fillrange-true-above-lines/39830/6):
>
> Not as easily… I think @jules did some work on this? I just did a super dirty hack for a simple version: using AbstractPlotting, GLMakie np = 500 nc = 200 f(x) = 2\*x+1 x = LinRange(-1,1,f(np)) y = rand(f(np))\*2 .- 1 scene = Scene() x\_c = LinRange(-nc/np,nc/np,f(nc)) y\_c = LinRange(-nc/np,nc/np,f(nc)) c\_mat = @. x\_c^2 + y\_c'^2 lineplot = lines!(scene, x, y)[end] translate!(lineplot, 0, 0, -1) heatmap!(scene,x\_c,y\_c,c\_mat) cplot = contour!(scene,x\_c,y\_c,c\_mat, linewidth=2, color=:whit…

and

> <https://github.com/MakieOrg/Makie.jl/issues/832>
>
> I don't think one can annotate contours with values in Makie (yet), for example …(matplotlib):
> 
> \<img width=50% src="https://matplotlib.org/3.3.3/\_images/sphx\_glr\_contour\_demo\_001.png"\>
> 
> I could not find an existing issue for this, so I thought I'd create one! 😃 
> 
> \---
> 
> FWIW, I only found \[this discourse post\](https://discourse.julialang.org/t/makie-jl-plotting-contour-with-fillrange-true-above-lines/39830/6) with a potential workaround, with this plot:
> 
> \<img width=50% src="https://aws1.discourse-cdn.com/business5/uploads/julialang/original/2X/d/d55de321c4d7d36c52319a76555617afb4cf5059.png"\>

---

<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 6, 2021, 11:12am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640/3 "2021-05-06T11:12:31Z")

</div>

This works:

```julia
using GLMakie
using GLMakie: Quaternionf0

positions = rand(Point2f0, 5)
fig, ax, textplot = text([(string(Tuple(round.(x, digits=2))), x) for x in positions], align=(:center, :center))

layouts = textplot._glyphlayout[]
strings = textplot[1][]
bbs = map(strings, layouts) do str, l 
    GLMakie.AbstractPlotting.data_text_boundingbox(str[1], l, Quaternionf0(0,0,0,1), Point3f0(0))
end
scatter!(ax, positions, markersize=widths.(bbs), marker=Rect)
reverse!(ax.scene.plots)
display(fig)

```

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

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [May 6, 2021, 11:12am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640/4 "2021-05-06T11:12:49Z")

</div>

Hell, this works pretty well:

```julia
for radius in (30, 60, 90, 120, 150)
  lines!(ax, Circle(zero(Point2f0), radius))
  scatter!(ax, Point2f0(0, radius), color = :white, markersize = round(Int, length(string(radius))*45/3)*1px, strokewidth = 0)
  text!(ax, string(radius), position = Point2f0(0, radius), align = (:center, :center))
end

```

 ![mwe](https://global.discourse-cdn.com/julialang/original/3X/3/9/399d7db69d7a4fb2bc1051ab89bb330bdcf03979.png)

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [May 6, 2021, 11:24am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640/5 "2021-05-06T11:24:50Z")

</div>

> [@sdanisch](#):
>
> ```julia
> reverse!(ax.scene.plots)
> 
> ```

reverses the order of _everything_, so it messes things up a bit. I’ll try and see how I can reverse the order of only the text and scatter point.

This did it:

```julia
ax.scene.plots[end-1:end] .= ax.scene.plots[[end, end-1]]

```

 ![mwe](https://global.discourse-cdn.com/julialang/original/3X/1/b/1ba135a7df023a3bacb40f0acae55eb5fd725ac0.png)

---

<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 6, 2021, 11:41am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640/6 "2021-05-06T11:41:56Z")

</div>

In theory, one could also calculate the bbs before… But this is simpler 😉 We should just add a good recipe for text with backround going forward!

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [May 6, 2021, 11:45am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640/7 "2021-05-06T11:45:27Z")

</div>

For the sake of reactivity, it would be better to have the bbs depend on the text object so that if the user changes it too will change. Also, it might be simpler to wrap the text in a container where the first element is that scatter object, thus removing the need to reverse the order after the fact.

Thanks for the help Simon!

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [May 6, 2021, 2:06pm UTC](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640/8 "2021-05-06T14:06:54Z")

</div>

@sdanisch just discovered this doesn’t work with `CairoMakie` (regardless if the output is png or pdf). Which is really strange…  
I’ll try with my scatter hack… OK, my scatter hack worked…

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [May 7, 2021, 11:39am UTC](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640/9 "2021-05-07T11:39:43Z")

</div>

I suspect `Rect` as a marker in CairoMakie doesn’t work…

---

<div class="post-metadata">

### Author: ![BambOoxX](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/bambooxx/32/22179_2.png) [@BambOoxX](https://discourse.julialang.org/u/BambOoxX)
#### Post date: [May 16, 2023, 2:08pm UTC](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640/10 "2023-05-16T14:08:41Z")

</div>

Hey is there a more reliable implementation of this filling in latest Makie versions ? [Fill a bounding box of a text in Makie - #3 by sdanisch](https://discourse.julialang.org/t/fill-a-bounding-box-of-a-text-in-makie/60640/3) does not work anymore due to `_glyphlayout` not existing anymore it seems.
