# Overlay values as text in a PlotlyJS heatmap annotations

**URL:** <https://discourse.julialang.org/t/overlay-values-as-text-in-a-plotlyjs-heatmap-annotations/92733>\
**Category:** Visualization\
**Tags:** plotlyjs\
**Created:** [January 9, 2023, 9:16pm UTC](https://discourse.julialang.org/t/overlay-values-as-text-in-a-plotlyjs-heatmap-annotations/92733 "2023-01-09T21:16:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sob](https://avatars.discourse-cdn.com/v4/letter/s/65b543/32.png) [@sob](https://discourse.julialang.org/u/sob)\
**Post date:** [January 9, 2023, 9:16pm UTC](https://discourse.julialang.org/t/overlay-values-as-text-in-a-plotlyjs-heatmap-annotations/92733/1 "2023-01-09T21:16:13Z")

</div>

Hi,  
My code is rather simple:

```julia
using PlotlyJS
plot(heatmap(x=["a","b"],y=["c","d"],z=rand(2,2),colorscale="Reds",showscale=false))

```

I’m trying to have the values as an overlay (say black text) on each of the 4 squares. In Python I’d be using plotly’s annotations, but couldn’t really find how to do that with the Julia version. Any hint appreciated.

---

<div class="post-metadata">

**Author:** ![jd-foster](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jd-foster/32/35824_2.png) [@jd-foster](https://discourse.julialang.org/u/jd-foster)\
**Post date:** [January 10, 2023, 12:41am UTC](https://discourse.julialang.org/t/overlay-values-as-text-in-a-plotlyjs-heatmap-annotations/92733/2 "2023-01-10T00:41:47Z")

</div>

Could you post a link or short example of the Python version with an image of what you’re aiming for?

---

<div class="post-metadata">

**Author:** ![sob](https://avatars.discourse-cdn.com/v4/letter/s/65b543/32.png) [@sob](https://discourse.julialang.org/u/sob)\
**Post date:** [January 10, 2023, 1:29am UTC](https://discourse.julialang.org/t/overlay-values-as-text-in-a-plotlyjs-heatmap-annotations/92733/3 "2023-01-10T01:29:43Z")

</div>

A sample output I’m getting in Python is as follows:

 ![2023-01-09_20-25](https://global.discourse-cdn.com/julialang/original/3X/d/1/d1e3bff98e7231ec35195395c4e9e935109e3821.png)

I will try to come up with a minimum working example in python, but the steps are a manual creation of a plotly.graph\_objects.Figure() figure with rectangular shapes and annotations manually crafted.

Edit: not my code, but some sample python plotly code achieving a similar result at [stack overflow](https://stackoverflow.com/questions/66800592/plotly-how-to-create-a-heatmap-with-date-values)

---

<div class="post-metadata">

**Author:** ![jd-foster](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jd-foster/32/35824_2.png) [@jd-foster](https://discourse.julialang.org/u/jd-foster)\
**Post date:** [January 11, 2023, 2:54am UTC](https://discourse.julialang.org/t/overlay-values-as-text-in-a-plotlyjs-heatmap-annotations/92733/4 "2023-01-11T02:54:30Z")

</div>

> [@sob](#):
>
> ```julia
> plot(heatmap(x=["a","b"],y=["c","d"],z=rand(2,2),colorscale="Reds",showscale=false))
> 
> ```

I would first define the plot trace (data) separate to the layout options; annotations are added in layouts, not traces. So a simple example:

```julia
trace = heatmap(x=["a","b"],y=["c","d"],z=rand(2,2),
              colorscale="Reds",
              showscale=false)

layout = Layout(
       annotations=[
           attr(x=0.25, y=0.25, text=1),
           attr(x=0.25, y=0.75, text=2), 
           attr(x=0.75, y=0.25, text=3),
           attr(x=0.85, y=0.95, text=4, showarrow=false)
           ],
           font=attr(size=20))

plot(trace, layout)

```

 ![newplot](https://global.discourse-cdn.com/julialang/original/3X/f/8/f8617d8179080428a25c0858f5e5faa1c51d9761.png)

If you want to get more involved, consider this example: [Annotated Heatmap](https://plotly.com/javascript/heatmaps/#annotated-heatmap)

Unfortunately, there is currently no equivalent in the Julia Plotly examples, but you can adapt most JavaScript examples by remembering to use the notation `font=attr(family="Arial", size=12)` in place of the JavaScript equivalent

```julia
font: {
        family: 'Arial',
        size: 12,
}

```

Full options for annotations are described here: [annotations](https://plotly.com/javascript/reference/#layout-annotations)

---

<div class="post-metadata">

**Author:** ![sob](https://avatars.discourse-cdn.com/v4/letter/s/65b543/32.png) [@sob](https://discourse.julialang.org/u/sob)\
**Post date:** [January 11, 2023, 1:05pm UTC](https://discourse.julialang.org/t/overlay-values-as-text-in-a-plotlyjs-heatmap-annotations/92733/5 "2023-01-11T13:05:33Z")

</div>

Thank you, this is pretty similar to what I use in Python but was getting the annotations construction wrong.  
Note that `x="a", y="c"` entries are accepted and take care of the centering/alignment for you.  
Much appreciated JD.

---

<div class="post-metadata">

**Author:** ![empet](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/empet/32/221303_2.png) [@empet](https://discourse.julialang.org/u/empet)\
**Post date:** [January 11, 2023, 5:18pm UTC](https://discourse.julialang.org/t/overlay-values-as-text-in-a-plotlyjs-heatmap-annotations/92733/6 "2023-01-11T17:18:07Z")

</div>

If @sglyon were to update PlotlyJS.jl to be compatible with the latest version of plotly.js, then an annotated heatmap could be simply defined as follows:

```julia
using PlotlyJS
pl= Plot(heatmap(z=rand(2:15, (3,3)),
                    text=[["A", "Ab", "C"],
                          ["Cd", "E", "Ef"],
                          ["G", "Gh", "Kl"]],
                    texttemplate="%{text}",
                    colorscale=colors.matter))
relayout!(pl, width=500, height=500, font_size=10)
display(pl)

```