Skip to content

Feature request: Axis boundaries #887

Description

@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:
    newplot
  2. But then some user starts using with the panning tool a bit too much:
    newplot 1

Activity

  1. etpinard commented on Sep 1, 2016

    @etpinard
    Contributor

    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?

  2. g-i-o- commented on Sep 3, 2016

    @g-i-o-
    Author

    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.

  3. etpinard commented on Sep 6, 2016

    @etpinard
    Contributor

    Why would we need axis.boundsmode ?

  4. g-i-o- commented on Sep 6, 2016

    @g-i-o-
    Author

    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

  5. etpinard commented on Sep 7, 2016

    @etpinard
    Contributor

    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.

  6. talgalili commented on May 31, 2017

    @talgalili

    BUMP, any chance this feature could be added?

    Thanks!

  7. jasjes commented on Sep 24, 2018

    @jasjes

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

  8. ajschmidt8 commented on Oct 2, 2018

    @ajschmidt8

    +1

  9. chrisdaniells commented on Jun 25, 2019

    @chrisdaniells

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

  10. jvandort commented on Oct 31, 2019

    @jvandort

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

  11. MrQubo commented on Nov 4, 2019

    @MrQubo

    I've made some work towards implementing this feature here: MrQubo#3
    Any help will be appreciated.

  12. Nabeelhassan commented on Nov 18, 2019

    @Nabeelhassan

    When can we expect this feature?

  13. DaveShuckerow commented on Jul 14, 2020

    @DaveShuckerow

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

  14. nicolaskruchten commented on Jul 14, 2020

    @nicolaskruchten
    Contributor

    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.

  15. MrQubo commented on Jul 14, 2020

    @MrQubo

    My code from Nov 4, 2019 was working for my use-case (column and sparse plots). MrQubo#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.

  16. jackparmer commented on Sep 10, 2020

    @jackparmer
    Contributor

    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.

    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.

  17. samuelnimi commented on Jul 25, 2023

    @samuelnimi

    That type of feature would be really awesome!

  18. AviadAvr commented on Nov 7, 2023

    @AviadAvr

    BUMP

    This feature would be super useful!

  19. alexcjohnson commented on Nov 8, 2023

    @alexcjohnson
    Collaborator

    Ah, this feature was actually released just recently as axis.minallowed / axis.maxallowed - added in plotly.js v2.26 / plotly.py v5.17, via #6547
    See https://plotly.com/python/axes/#setting-a-maximum-and-minimum-allowed-axis-value for usage from Python!

  20. nicolaskruchten commented on Nov 8, 2023

    @nicolaskruchten
    Contributor

    Out of curiosity: is there an easy way of tying minallowed/maxallowed to the computed range? Basically to let Plotly.js compute the autorange and set min/max allowed to that automatically, thereby implementing "zoom in but not out" without having to separately compute ranges outside of Plotly.js?

  21. alexcjohnson commented on Nov 8, 2023

    @alexcjohnson
    Collaborator

    Oh that's an interesting idea, but no I don't believe it's possible currently.

  22. archmoj commented on Nov 8, 2023

    @archmoj
    Contributor

    @nicolaskruchten Good idea. Simply tracked in #6779. Thank you!

  23. bozobec commented on Jan 10, 2024

    @bozobec

    Is this new feature limited to Plotly express? Is it going to be merged to Plotly eventually?

  24. jpfeuffer commented on Mar 23, 2025

    @jpfeuffer

    @alexcjohnson I don't think this is working correctly. You can still pan as much as you want until you get empty plots. Plotly just zooms into the plot while keeping the maxallowed limit until you do not have datapoints in your infinitesimal range anymore. Then there also is axis label flickering while panning over the maxallowed limit up to the point that the axis shows all labels again, although you are far over the maxallowed limit already.

    Why can't you just stop the panning during the drag when the axis reaches maxallowed? And why can't I disallow the completely unintuitive zooming while panning. Users are using pan exactly because they do not want the absolute value of the range between current visible max and current visible min to change (e.g. to always look at a span of 10 years while panning). This only works until you reach the maxallowed limit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions