Heatmap auto height and other tweaks

I have the following requirements for my heatmap:

  • All axis labels should be visible no matter how much rows and columns there are (solved with: axis -> dtick =1)
  • Very long axis labels should also be completely visible (solved with: axis -> automargin = true)
  • I want all the elements in the heatmap to be square, I have set scaleanchor = x on the yaxis to make this happen.

The problem I’m facing now is that the graph size is much larger than the actually heatmap (autosize on the Layout is still true). I could manually tweak the height on the layout to something more appropriate, but I want something automatic, since I won’t know beforehand how many rows/columns there are going to be.

This example shows the problem, the graph is too high, completely disconnecting the x-axis from the heatmap:

Hmm. I’m not sure I can provide a nice workaround here. layout.autosize is meant to fill what space the container div offers. It does not looks at other attributes to determine the graph’s width and height unfortunately.

That makes it indeed difficult if that’s how autosize works. Has there never been a need/desire to autosize a graph to a ‘reasonable’ size instead of always stretching content thin / squeezing it together to the container size? Why not let the container grow with content? For example in a bar chart you might want to define a bar width and then let the width of the figure grow depending on how many bars there are. The container could then show a scrollbar if content overflows.

For my heatmap I’m thinking right now to forgo the ‘it has to be absolutely square’ requirement and come up with some heuristics to dynamically set the height and width based on the dimensions of the input such that it will come out approximately square.

Yeah, that probably what we should try to do, but finding what reasonable means for all our graph types sounds like a difficult task.