Axis constraints without zoom - use scaleanchor with fixedrange

plotly.js
1

I am trying to create a plot with 3 properties:

  1. Responsive to changes in window size (don’t want to hardcode height and width)
  2. Has axes that have uniform scale (one unit is the same number of pixels in both axes)
  3. does NOT have zoom enabled (fixedrange:true for both axes).

I have tried setting scaleanchor and fixedrange but it is my understanding scaleanchor doesn’t work if fixedrangeis set to true.

Here is an example figure:
var figure = { "frames": [], "layout": { "autosize": true, "xaxis": { "range": [1.5, 6.5], "type": "linear", "domain": [0,1], "autorange": true, "fixedrange": true, }, "yaxis": { "range": [1.5, 6.5], "type": "linear", "domain": [0,1], "scaleanchor": "x", "autorange": true, "fixedrange": true, } }, "data": [ { "zmax": 0.9221846392818049, "zmin": 0.09501206638418558, "y": [2, 3, 4, 5, 6], "x": [2, 3, 4, 5, 6], "z": [ [0.5, 0.8, 0.6, 0.8, 0.2], [0.4, 0.3, 0.7, 0.2, 0.1], [0.7, 0.5, 0.9, 0.5, 0.3], [0.5, 0.8, 0.6, 0.8, 0.2], [0.4, 0.3, 0.7, 0.2, 0.1], ], "type": "heatmap", "zauto": true } ] }

Any help appreciated.

2

Hmm. I think you’re correct, something is up with fixedrange: true axes that set a scaleanchor. Thanks for reporting!

If you don’t care about hover labels, you can get the desired result using staticPlot: true. See https://codepen.io/etpinard/pen/RvNbPK

3

You can subscribe to https://github.com/plotly/plotly.js/pull/3460 for the most up-to-date development info.

4

Great support, thank you! At the moment I constraining the html div to be a square but it is not accurate or ideal - it lets you keep hover labels on though.

1 Like