Currently there are 2 “zooming” behaviours in Plotly.JS heatmaps:
-
Here you can take any rectangular shape for the zoom (click, drag and drop). But then the pixels are not square, which is not ok for some applications (the aspect ratio is not preserved, and sometimes it should be preserved):
const z = Array.from({length: 500}, () => Array.from({length: 100}, () => Math.floor(Math.random() * 255))); Plotly.newPlot('plot', [{type: 'heatmap', z: z}], {});<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script> <div id="plot"></div> -
Demo here : Here the pixels are square thanks to
{'yaxis': {'scaleanchor': 'x'}}, but then you can zoom only with a certain aspect ratio rectangular shape, which is sometimes a limiting factor for the UX/UI:const z = Array.from({length: 500}, () => Array.from({length: 100}, () => Math.floor(Math.random() * 255))); Plotly.newPlot('plot', [{type: 'heatmap', z: z}], {'yaxis': {'scaleanchor': 'x'}});<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script> <div id="plot"></div>
Question: How to have both, i.e. you can draw a rectangle selection zoom of any shape? and keep square-shape pixels? The zoomed object should be centered in the plot (with horizontal or vertical white space if needed).