Search code examples
javascriptrangelimitplotly.js

Change axes limits in plotly heatmap

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): Original Heatmap

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

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.

Solution

  • I just found the solution:

    In order to being able to set a dedicated range for the x- and y-axes one first has to set 'autorange' to false:

    layout.xaxis.autorange=false;
layout.yaxis.autorange=false;
layout.xaxis.range=[0,5];
layout.yaxis.range=[0,5];
Plotly.redraw('myDiv');

    So that should work.