✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Can't reverse y axis on heatmap

Hi, I am trying to do the following:
I have some vectors, i want to display the pairwise cosine distance between them in a heatmap, but not twice, so above the diagonal, it should be empty.
Problem: when I use plotly.graph_objects -> go.Figure like in the commented line, it works as expected, but I am not able to set range_color, but i need this feature, because in another plot the range is much lower, but I want the plots to be comparable directly, so I need to fix the range.
So if I then use plotly.express to plot my heatmap, unfortunately, the y-axis is upside down


and i can’t turn it around, as recommended elsewhere, with autorange=“reversed”. It works for the x axis, but not on the y axis… Why? Also if I put it directly in the dict at yaxis it doesn’t work… but for xaxis it does.

cosine_distances = []


for i, outer_template_vector in enumerate(utah):
    temp_cosine_distances = []
    temp_cosine_distances[0:i] = i*[None]
    for inner_ind in range(i, len(utah)):
        temp_cosine_distances.append(cosine(outer_template_vector, utah[inner_ind]))
    cosine_distances.append(temp_cosine_distances)

fig = px.imshow(cosine_distances, range_color=[0,0.6])
#fig = go.Figure(data=go.Heatmap(z=cosine_distances))
fig.update_layout(
    yaxis = dict(
        tickmode = 'linear',
        tick0 = 0,
        dtick = 1
    ),
    xaxis = dict(
        tickmode = 'linear',
        tick0 = 0,
        dtick = 1
    ), height = 700, width = 700
)
fig.update_yaxes(autorange="reversed")
fig.show()

Hi @dlarah welcome to the forum! If you do print(fig) you’ll see that the yaxis is already reversed (this is the default of px.imshow in order to display image data, that is the origin is at the upper left corner). You could do

fig.update_yaxes(autorange=True) 

to overwrite the reversed setting, but there is a more px-idiomatic solution: just set the origin argument of px.imshow to lower.

1 Like

Hi @Emmanuelle, thank you so much for your help! You saved my day :slight_smile:
I hope this will be useful for somebody else as well.