Plotly.js: Feature request: Axis boundaries

[g-i-o-]

Hi, I just recently started using your plotting library (which is awesome by the way) to do some heatmap plots. One of the main complaints I've received have been the ability to pan outside the plot's boundaries (just click and drag the plot outside the viewport and suddenly the axis range point to some non-data containing area). While this can be mitigated with the fixedrange attribute, you end up losing the pan and zoom features for that axis.

So, I was thinking that maybe adding axis boundaries could be a thing? Maybe two more properties could be added to the axes: bounds and boundsmode. bounds gets checked in the panning and zooming logic and, if set, it constrains the range to the specified bounds. boundsmode allows the bounds to be computed automatically from the plot (like autorange). That way users can zoom and pan al around the plot, but cannot get outside the plot bounds.

As proof of concept I have created this pull request g-i-o-/plotly.js#1 on my fork and was thinking maybe you guys could check it out comment on how to improve and, if you like it, add it or something like that.

---

1. Here we have a nice little heatmap:
   
2. But then some user starts using with the panning tool a bit too much:
   

[etpinard]

Yes, that would be a great addition to the library.

We already partly have this concept for ternary plots using the axis min attribute.

So, maybe for consistency, we should add axis.min and axis.max to cartesian axes with default values being null corresponding to no limits. Thoughts?

[g-i-o-]

axis.min and axis.max sounds ok. Any thoughts on how should axis.boundsmode should be called? the idea is that axis.boundsmode can be set to 'auto' and then the max and min are set using the autorange funcionality.

[etpinard]

Why would we need axis.boundsmode ?

[g-i-o-]

Currently, with axis.boundsmode = 'auto' the bounds are set automatically using the plot's autorange feature. That way you can just show the data and the plot doesn't allow the user to pan/zoom outside the plot bounds

[etpinard]

Oh I see. I guees a axis.boundsmode would be nice to toggling between set bounds and auto computed bounds.

Can you think of other bounds mode besides 'auto' and set-by-axis.min/axis.max ?

In the case where there are only two possible modes, I'd vote for calling adding a boolean attribute e.g. axis.autobounds = true // or false instead of axis.boundsmode.

[talgalili]

BUMP, any chance this feature could be added?

Thanks!

[jasjes]

PING! Would LOVE the ability to limit zoom-out and pan so the user can't move beyond available data.

[ajschmidt8]

+1

[chrisdaniells]

This would be great, not being able to prevent infinite zoom/pan is a pain!

[jtvd78]

Seriously, how is this not a feature? I'd expect something basic like limiting axis bounds to be implemented.

[MrQubo]

I've made some work towards implementing this feature here: https://github.com/MrQubo/plotly.js/pull/3
Any help will be appreciated.

[Nabeelhassan]

When can we expect this feature?

[DaveShuckerow]

Bump: This would be an extremely useful feature to have.

[nicolaskruchten]

We'd be happy to work with someone from the community to implement this feature, but it's not on our roadmap at this time.

[MrQubo]

My code from Nov 4, 2019 was working for my use-case (column and sparse plots). https://github.com/MrQubo/plotly.js/pull/3
It requires testing and probably some adjustments to work with other plot types. Updating it to the current version of plotly.js might require some additional work as well.
I'm not planning to work on this anymore but it's there if someone from community was to pick it.

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.