to visualize data I am using a heatmap from the plotly.js library. After rendering the heatmap I want to be able to dynamically change the axis limits. So far I manage to do that for the z-axis (color) but not for the x- or y-axes.

Here is what I try:

layout.xaxis.range=[0,5];
layout.yaxis.range=[0,5];
data[0].zmin=0;
data[0].zmax=10;
Plotly.redraw('myDiv');

Sadly only the z-axis works. You can check an example here: https://codepen.io/brockerdocker/pen/QWgvLGx

Here is what I get (only z-limits changed):

And here is what I would like to get (also x- and y- limts changed):

However this 2nd heatmap I can only achieve if I specify x- and y-ranges before I call Plotly.newPlot('myDiv', data, layout);. Once I generated the heatmap it seems that I can't change the ranges anymore. So any idea how I could still change the ranges after having generated the heatmap would be great.