# Shorten axis text in heatmap

**URL:** <https://community.plotly.com/t/shorten-axis-text-in-heatmap/80454>\
**Category:** 📊 Plotly Python\
**Created:** [November 28, 2023, 11:48am UTC](https://community.plotly.com/t/shorten-axis-text-in-heatmap/80454 "2023-11-28T11:48:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Al\_V](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Al\_V](https://community.plotly.com/u/Al_V)\
**Post date:** [November 28, 2023, 11:48am UTC](https://community.plotly.com/t/shorten-axis-text-in-heatmap/80454/1 "2023-11-28T11:48:29Z")

</div>

Hi all, I’m trying to shorten long text labels on the y-axis of a heatmap, where the y-axis has a nested-type structure.

Example:

```auto
import numpy as np
import plotly.graph_objects as go

x = ['1','2']
y = np.array(
    [
        ['Veryveryveryveryveryverylong1', 'Veryveryveryveryveryverylong1','short', 'short'],
        ['A', 'B', 'A', 'B']
    ]
)
z = np.random.rand(4,2)

fig = go.Figure()
fig.add_trace(go.Heatmap(x=x, y=y, z=z))

```

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/4/545df45d5626311e5d2fcc6eb4598683276752ea.png)

What I’d like, is the `Veryveryveryveryveryverylong1` label to be shortened to `Veryveryve...` or something (but still displaying the full label via the tooltip).

I tried altering the `ticktext`, like

```auto
import pandas as pd

y_ser = pd.Series(y[0])
y_0 = np.where(y_ser.str.len() > 10, y_ser.str[:10] + "...", y_ser)
new_y = np.array([y_0, y[1]])

fig.update_layout(
    yaxis = {
        'tickmode': 'array',
        'tickvals': y,
        'ticktext': new_y
    }
)

```

(and several options around this) but this just removes the y-axis labels completely.

Very grateful for any suggestions!

---

<div class="post-metadata">

**Author:** ![farispriadi](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/farispriadi/32/26759_2.png) [@farispriadi](https://community.plotly.com/u/farispriadi)\
**Post date:** [December 7, 2023, 2:17pm UTC](https://community.plotly.com/t/shorten-axis-text-in-heatmap/80454/2 "2023-12-07T14:17:47Z")

</div>

Hi @Al_V ,

Because I have tried you code and it does make y axis disappeared.  
So I came up with solution but maybe this is mix with my creativity 😁

The idea is using `text` and `hovertemplate` keywords.

the y axis data will filled with your `new_y` (from your code) which is the short version of y axis.

the `text` keyword will be filled with a list of the hover text for y axis with long text.

```auto
text=[[str(y_val0)+"-"+str(y_val1),str(y_val0)+"-"+str(y_val1)] for y_val0,y_val1 in zip(y[0],y[1])]

```

the `hovertemplate` keyword will put all `x`,`y`,`z` hovered text, and for `y` hover value will be replace value from `text`.

the implementation of this scenario is like code below.

```auto
import numpy as np
import pandas as pd
import plotly.graph_objects as go

x = ['1','2']
y = np.array(
    [
        ['Veryveryveryveryveryverylong1', 'Veryveryveryveryveryverylong1','short', 'short'],
        ['A', 'B', 'A', 'B']
    ]
)

z = np.random.rand(4,2)

y_ser = pd.Series(y[0])
y_0 = np.where(y_ser.str.len() > 10, y_ser.str[:10] + "...", y_ser)
new_y = np.array([y_0, y[1]])
print(new_y)

fig = go.Figure()
fig.add_trace(go.Heatmap(
	x=x,
	y=new_y,
	z=z,
	text=[[str(y_val0)+"-"+str(y_val1),str(y_val0)+"-"+str(y_val1)] for y_val0,y_val1 in zip(y[0],y[1])],
	hovertemplate =
	'x : %{x}<br>'+
	'y : %{text}<br>'+
	'z : %{z}',
	name="",
	))

fig.show()	

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/6/b66e032c74ccba1ac85da8b6b25ee4e16a3765c9.png)

Hope this help.

---

<div class="post-metadata">

**Author:** ![Al\_V](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Al\_V](https://community.plotly.com/u/Al_V)\
**Post date:** [December 19, 2023, 9:52am UTC](https://community.plotly.com/t/shorten-axis-text-in-heatmap/80454/3 "2023-12-19T09:52:13Z")

</div>

@farispriadi many thanks - it looks like there isn’t a built-in for this, so your solution is a great alternative!

---

<div class="post-metadata">

**Author:** ![Al\_V](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Al\_V](https://community.plotly.com/u/Al_V)\
**Post date:** [December 19, 2023, 1:41pm UTC](https://community.plotly.com/t/shorten-axis-text-in-heatmap/80454/4 "2023-12-19T13:41:12Z")

</div>

For others who come here - @farispriadi’s solution works well for my original example, with two columns. To extend to any number of columns, try something like `text = [[y0 + " - " + y1 for _ in x] for y0, y1 in zip(y[0], y[1])]`