Reset axis after layout update

plotly.js
1

Hello guys,

i would like to know if it is possibile to change initial axes values after a relayout.

For example : http://codepen.io/anon/pen/rmPXBO

if i click on reset axes it doesn’t change x axes as ‘xaxis.range’: [0,1].

How can i modify the settings used in the resetScale2d?

Thanks

Davide

2

Here’s a very hacky solution (don’t tell anyone): http://codepen.io/etpinard/pen/xdBxdx?editorsui=0010

Here’s better solution using custom modebar buttons: http://codepen.io/etpinard/pen/gWEOWR?editors=0010

1 Like
3

Hi @etienne ,
Thank you for the example.
Would you be able to tell me how to do this in Python?
Thanks!

4

Can the same axis-reset be done in case of 3-D Scatter Plot ?

1 Like
5

I tried the “hacky” solution on my project, but it didn’t work for me. I get the graphDiv element and add the ._fullLayout.xaxis._rangeInitial to the desired range, but it still zooms out. Any idea why this may be happening? Should I set or use something else? I’m using plotly.js 3.0.0.

6

To start with, there is no _rangeInitial property, instead you have the _rangeInitial0 and _rangeInitial1 properties.

image
image784×792 18.4 KB

These properties take their values ​​from the range property that we pass in the layout when we first create the graph with any of the newPlot, plot, react, etc. functions; if we don’t pass a range, it starts with the maximum and minimum of the axis value range; these properties are used to reset the axis to the coordinates that it saves every time we use a function that modifies the graph (relayout, restyle, update, redraw, etc.) since these functions re-render all the graphs and elements that you have with the new changes. They are also used when we double-click on the graph, resetting the axes to those coordinates, the same action that the modebar button performs.

If you want the graph to move to certain coordinates when you run some rendering function then you just need to pass the range values ​​when you create the graph

Plotly.newPlot(layer, data, {
  xaxis: {
    range: [xcoord0, xcoord1]
  },
  yaxis: {
    range: [ycoord0, ycoord1]
  },
  ...
}, config)

If you don’t pass range values ​​when you create the plot and you want the plot to move to a certain position when you use some rendering function like relayout then you will have to pass the range you want to move to

Plotly.relayout(layer, {
  "xaxis.range": [newxcoord0, newxcoord1],
  ...
})

Be careful how you pass the range to the render function as the option above is not the same as the following one.

Plotly.relayout(layer, {
  xaxis: {
    range": [newxcoord0, newxcoord1]
  },
  ...
})

The first one only changes the range property without modifying the other properties of the xaxis object, the second one will delete all the properties of the xaxis object and set them to the default values ​​and only the range property will be set to the value you passed since it understands that you are passing it a new xaxis object.

And finally, I’ll leave you with an example of how to manipulate the range to move around the graph.

1 Like
7

That indeed solved the issue! My problem was not on the relayout or any render functions, it was because I pass the range, but when double clicking or clicking on the modebar “Reset Axis”, it’d activate autozoom and not zoom to the range I passed initially (there was a white space in the beginning and at the end). Now that I set those 2 rangeInitial values, it goes to the correct values. Thanks!