Square Heatmap ticks are off

I have plotly 4.1.0 installed and this code (in a Jupyter Notebook):

import numpy as np
import plotly.offline as py
import plotly.graph_objs as go

matrix = np.random.randn(10, 10)
ticks = ["tick %i" % i for i in range(10)]
data = [go.Heatmap(z=matrix, x=ticks, y=ticks, colorscale='Viridis')]
layout = go.Layout(
            hovermode='closest',
            autosize=True,
            xaxis=dict(zeroline=False),
            yaxis=dict(zeroline=False, autorange='reversed', scaleanchor="x", scaleratio=1)
         )
fig = go.Figure(data=data, layout=layout)
py.iplot(fig)

Produces this plot:

I think there really shouldn’t be this space between the y ticks and colorbar and the heatmap. Without the yaxis scaleanchor="x" it looks fine, but I really want a square heatmap… Is there any setting I’m missing or is this a bug?

Thanks!

[alexcjohnson]

Let me also point out the xaxis.constraintoward: 'right' option, that - when used with xaxis.constrain: 'domain' - pushes the whole x axis (and the y-axis ticks with it) over to the right. We never alter the provided height and width (except autosize but that only considers external css/page sizing, not the plot contents). So without adjusting the width/height explicitly to match the data there’s no way to satisfy the constraints and automatically end up with no excess whitespace anywhere - But at least with constraintoward you’ll have all the plot elements aligned correctly, you just have to remove the large left margin to get the plot you want.

Also, be aware that you may specify constrain and constraintoward for BOTH axes. This is useful in the event you don’t know the aspect ratio of your matrix ahead of time but you always want both x and y tick labels adjacent to the data.

https://codepen.io/alexcjohnson/pen/wvwJrqN?editors=0010

ah, hah that’s funny: when I exported it showed that in fact it just gives the same problem the other way 😛

That’s weird, that part looks like a bug - in any given situation only one of the two axes should have ended up with a different range than it would have had without the constraint. Perhaps there’s some funny interaction between the constraint and the auto tick rotation that we’re not always dealing with correctly? If you can reproduce it let’s file it over at plotly.js.

[nicolaskruchten]

Just an update to my first version above… adding constrain="domain" to both axes ensures there’s never plot area overflow in either direction.