# Axes for Annotated Heatmaps in Python

**URL:** <https://community.plotly.com/t/axes-for-annotated-heatmaps-in-python/38309>\
**Category:** 📊 Plotly Python\
**Created:** [April 23, 2020, 8:10pm UTC](https://community.plotly.com/t/axes-for-annotated-heatmaps-in-python/38309 "2020-04-23T20:10:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jayveesea](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jayveesea](https://community.plotly.com/u/jayveesea)\
**Post date:** [April 23, 2020, 8:10pm UTC](https://community.plotly.com/t/axes-for-annotated-heatmaps-in-python/38309/1 "2020-04-23T20:10:13Z")

</div>

I’m trying to extend [this](https://plotly.com/python/annotated-heatmap/) example:

```auto
import plotly.figure_factory as ff
import numpy as np
np.random.seed(1)
 
z = np.random.randn(20, 20)
z_text = np.around(z, decimals=2) # Only show rounded value (full value on hover)
 
fig = ff.create_annotated_heatmap(z, annotation_text=z_text, colorscale='Greys',
                                   hoverinfo='z')
 
for i in range(len(fig.layout.annotations)):
    fig.layout.annotations[i].font.size = 8

fig.show()

```

…by adding x and y axes labels. When I use numbers that are relatively small (1-20) it’s ok, BUT if the numbers are large like 0-2000 it seems to fall apart when it’s displayed.

for instance, here the y is 1-20 and the x is 1-2000:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/f/f1b9781640ed39e8633ecb46cf9c6b48adfd81c7.png)

for x/y I’m adding them like:

```auto
xx=[100,200,300,400,500,600,700,800,900,1000,1100,1200,1300,1400,1500,1600,1700,1800,1900,2000]
yy=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]

```

and then:

```auto
fig = ff.create_annotated_heatmap(z, x=xx, y=yy, annotation_text=z_text, colorscale='Greys', hoverinfo='z')

```

any ideas?

thx!

EDIT:  
I should add that the same thing happens when applied to the y axis:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/c/c638c35aeceac8cbd9036b391a8714e1ca9d5072.png)

---

<div class="post-metadata">

**Author:** ![Alexboiboi](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/alexboiboi/32/6420_2.png) [@Alexboiboi](https://community.plotly.com/u/Alexboiboi)\
**Post date:** [April 24, 2020, 12:18am UTC](https://community.plotly.com/t/axes-for-annotated-heatmaps-in-python/38309/2 "2020-04-24T00:18:45Z")

</div>

Hi @jayveesea,

It looks like `figure_factory` interprets the `x`and `y` parameters as `list` of `int` or `float` when there is no letter in the label. This looks like a bug to be. In the mean time you can use this hack:

```auto
import plotly.figure_factory as ff
import numpy as np
np.random.seed(1)

N=5
z = np.random.randn(N,N)
z_text = np.around(z, decimals=2) # Only show rounded value (full value on hover)
    
xx= [f'<br>{i}' for i in np.linspace(100,2000,N).astype(int)]
yy= ['<br>'+str(i) for i in np.linspace(1,20,N).astype(int)]
fig = ff.create_annotated_heatmap(z.tolist(), x=xx, y=yy, annotation_text=z_text, colorscale='Greys', hoverinfo='z')

for i in range(len(fig.layout.annotations)):
    fig.layout.annotations[i].font.size = 8
fig.show()

```

hope it helps,

Alex-

PS: don’t use block quotes to write code in your message, enclose it in triple backticks 🙂

---

<div class="post-metadata">

**Author:** ![jayveesea](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jayveesea](https://community.plotly.com/u/jayveesea)\
**Post date:** [April 24, 2020, 12:03pm UTC](https://community.plotly.com/t/axes-for-annotated-heatmaps-in-python/38309/3 "2020-04-24T12:03:02Z")

</div>

> [@Alexboiboi](#):
>
> `xx= [f'<br>{i}' for i in np.linspace(100,2000,N).astype(int)]`  
> `yy= ['<br>'+str(i) for i in np.linspace(1,20,N).astype(int)]`

This works perfect, thanks!

Thx for the tip on code format too!