Skip to content

How to align ticks for multiple y axis so all grid squares are equal size #1962

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
andy1547 opened this issue Aug 18, 2017 · 34 comments
Closed
Labels
feature something new

Comments

@andy1547
Copy link

andy1547 commented Aug 18, 2017

This is best explained by the screenshot:
scale

As you can see the grid squares differ in size, I'd like these to remain constant. Instead I'd like the y2 axis ticks to scale to match the y axis values, i.e. the y axis would step up like 10,20,30 but the y2 axis would step up with respect to those values i.e. 12, 24, 36 etc.
Is this possible with plotly?

@andy1547 andy1547 changed the title How to scale y2 axis range values to y axis range so all grid squares are equal size How to align ticks so all grid squares are equal size Aug 18, 2017
@andy1547 andy1547 changed the title How to align ticks so all grid squares are equal size How to align ticks for multiple y axis so all grid squares are equal size Aug 18, 2017
@alexcjohnson
Copy link
Collaborator

You can make this happen manually (set yaxis2.dtick and if necessary yaxis2.tick0) but that will only last until the viewer changes the y/y2 ranges independently (or even the two ranges together assuming you're using automatic ticks on yaxis). If you're in an environment where you can attach event handlers you could listen to plotly_relayout events and update these values whenever either range changes. There's no way to automatically do it.

I suppose it would be possible to add a setting like yaxis2.tickmode = 'match overlay' (assuming you also have yaxis2.overlaying = 'y') that would match pixel positions of ticks/grids between the two. It would in general not look that great though - unless you've set it up specifically, you're likely to end up with ticks at 12.33333 or the like.

Another solution you may be interested in is turning the gridlines off and using showspikes and spikemode: across

@ankuradhey
Copy link

Any update on this issue? Is there any workaround or hacky solution?

@alexcjohnson
Copy link
Collaborator

No updates, and the only workarounds I'm aware of are those I mentioned above. This would be a great issue for a community PR.

@andy1547
Copy link
Author

andy1547 commented Jun 25, 2018

@ankuradhey If this is a deal breaker then you may want to try out Flot see this example http://www.flotcharts.org/flot/examples/axes-multiple/index.html
This would be a great addition to plotyjs (currently this is the only factor blocking our team switching to it as our primary graphing library).

@ghost
Copy link

ghost commented Jul 12, 2018

I've come across the same issue, so I'm having a crack to see if I can write something that will generate compatible ranges for both axes. Can't promise anything but if it bears fruit I'll both stick it on GitHub and have a look at making a PR out of it.

@Braintelligence
Copy link

@alexcjohnson Thanks for the hint about dtick and tick0. This helped for my use-case but some "automated" way of doing it would be even more awesome 😸

@Braintelligence
Copy link

Just a quick idea: Isn't all that it takes to have the same amount of ticks and interdistance on both axes? Wouldn't something like synchronizeTickCount and making sure that both sides have the same amount of ticks and interdistance then suffice? You'd just need to mathematically derive the necessary dtick to achieve that.

@alexcjohnson
Copy link
Collaborator

Just a quick idea: Isn't all that it takes to have the same amount of ticks and interdistance on both axes?

That's enough for dtick but tick0 also needs to be set appropriately. But it occurs to me in the most general case even that wouldn't do it, because the ticks you're matching needn't be linearly spaced - could be log, or array tickvals, or nonuniform date ticks (months/years). Anyway it seems like a setting like tickmode = 'match overlay' could cover all of these cases: just look at where all the ticks of the main axis got drawn and put ticks in those same places on the matching axis. No need to ever calculate dtick or tick0.

@Braintelligence
Copy link

Would it be hard to implement tickmode = 'match overlay'?

@alexcjohnson
Copy link
Collaborator

Probably not very hard, want to give it a try? Plotly folks are a bit busy for the foreseeable future...

@Braintelligence
Copy link

I wish I had the time to dedicate, seriously, so I could give back to you guys for how you give to the community. Maybe I can tackle this in Feb/Mar 😭

@qxlsz
Copy link

qxlsz commented Jun 27, 2019

Is there a fix so far?

@VictorBezak
Copy link
Contributor

VictorBezak commented Feb 28, 2020

@andy1547 @Braintelligence @qxlsz @alexcjohnson @ankuradhey

I’ve crafted a comprehensive solution. This was fairly rushed, so if there are any mistakes or confusions, please do let me know

https://github.com/VictorBezak/Plotly_Multi-Axes_Gridlines

@pkozul
Copy link

pkozul commented Mar 1, 2020

@andy1547 @Braintelligence @qxlsz @alexcjohnson @ankuradhey

I’ve crafted a comprehensive solution. This was fairly rushed, so if there are any mistakes or confusions, please do let me know

https://github.com/VictorBezak/Plotly_Multi-Axes_Gridlines

@VictorBezak That's great. Thanks for that Victor. Trying it out now and it works well.

@VictorBezak
Copy link
Contributor

@pkozul I'm glad it's making use for you! Just wanted to let you know that the current version isn't yet working for all cases of data that contain fractional values between 0 and 1, or for data that contains negative values. I'm still working on the code that nicely covers all cases. I'll follow up when it's complete

@pkozul
Copy link

pkozul commented Mar 3, 2020

@VictorBezak Sounds good. Having it work for fractional values will be a great enhancement, as a lot of the charts I'm working with contain a mixture of Y axes (i.e. one axis has large numbers in the millions, while the other axis has fractional numbers). Good luck (although I'm sure you won't need it)!

@mschrader15
Copy link

For Python users, I have adapted @VictorBezak 's solution. See: https://gist.github.com/mschrader15/ccf4c4e9b5b1254a7d6b38a92fd88560

@jackparmer
Copy link
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.

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.

@VictorBezak
Copy link
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.

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.

Hey, @jackparmer ! I'd be happy to sponsor this feature. I've reached out via Plotly's "Contact Us" form. Is there a more preferred mode of contact from which I could get more details? Thanks!

@mschrader15
Copy link

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.

Hey, @jackparmer ! I'd be happy to sponsor this feature. I've reached out via Plotly's "Contact Us" form. Is there a more preferred mode of contact from which I could get more details? Thanks!

@jackparmer I'd love to help with the Python and Matlab integration. @VictorBezak should get 1st and 2nd dibs for the Plotly.js support though!

@jackparmer
Copy link
Contributor

I'd be happy to sponsor this feature. I've reached out via Plotly's "Contact Us" form. Is there a more preferred mode of contact from which I could get more details?

Hi @VictorBezak & @mschrader15, thanks for your interest and enthusiasm!

To clarify, we're seeking financial sponsorship for this feature (not providing it - I wish we were!)

If you, the company that you're working for, or your university lab has budget to bring this feature to life, the Contact Us form linked above is indeed the best way to get in touch about a collaboration.

@VictorBezak
Copy link
Contributor

I'd be happy to sponsor this feature. I've reached out via Plotly's "Contact Us" form. Is there a more preferred mode of contact from which I could get more details?

Hi @VictorBezak & @mschrader15, thanks for your interest and enthusiasm!

To clarify, we're seeking financial sponsorship for this feature (not providing it - I wish we were!)

If you, the company that you're working for, or your university lab has budget to bring this feature to life, the Contact Us form linked above is indeed the best way to get in touch about a collaboration.

@jackparmer I see, thanks for the clarification! I'm not sure if you've had a chance to view my implementation, but it's successful in providing the requested functionality. I believe all it needs to be ready for a PR is to be abstracted and integrated with Plotly's schema. Not sure what all may go into that, but I've begun working on it. My goal is to submit a community PR within the next few weeks. I'd be happy to provide assistance with documentation beyond this point, but first step is to actually follow through with the PR. Glad to connect with you, I'm always very enthusiastic to promote Plotly within my circle of data scientist friends. Besides the effort described above, let me know if there's anything I can do to help or contribute. https://github.com/VictorBezak/Plotly_Multi-Axes_Gridlines

@jackparmer
Copy link
Contributor

jackparmer commented Sep 10, 2020

Impressive work! We'll be on the lookout for your community PR. Integrating with Plotly's schema is indeed a necessary sticking point - we have to be careful to make sure that any schema additions can stand the test of time and we don't accidentally back ourselves into a corner. Plotly's is the first schema that can describe most scientific figures in a machine readable way. That said, it's a huge accomplishment to submit a PR that makes a mark on this schema, especially as an undergrad!

@VictorBezak
Copy link
Contributor

@jackparmer Making solid progress on this update! The path to completion isn't crystal clear, but I certainly haven't hit a wall yet. The pull request guide mentions that it's preferred for me to have a maintainer review the code on my forked copy before submitting a PR to the main plotly repo. I'm relatively naive when it comes to open source, so the best method I can think of to initiate this would be to contact plotly support and ask if they'll share my repo with a maintainer for review.

If there is a better method, just let me know; Otherwise, I'll proceed with this plan and should be requesting a review by end of next weekend!

@alexcjohnson
Copy link
Collaborator

@VictorBezak that's great! The preferred way to do this is:

  • Keep the master branch of your fork synchronized with the master branch of the main repo
  • Make a PR from another branch on your fork into the master branch of your fork.
  • Don't merge this PR: just @ mention a couple of the plotly.js maintainers - You can mention me and @archmoj - telling us it's ready for a review. Just including our handles in a PR comment is enough that we'll see your PR and know to look at it. You can also reply to this issue including a link to your PR.
  • Once we've looked at that PR to ensure the overall structure and concept is sound, we'll ask you to make a PR into the main repo, and we'll finish the review there.

@invictus2010
Copy link

@VictorBezak and everyone...thank you so much! i'm a newbie when it comes to all of this and hope i can someday make PR to large open source projects like you

@VictorBezak
Copy link
Contributor

@VictorBezak that's great! The preferred way to do this is:

  • Keep the master branch of your fork synchronized with the master branch of the main repo
  • Make a PR from another branch on your fork into the master branch of your fork.
  • Don't merge this PR: just @ mention a couple of the plotly.js maintainers - You can mention me and @archmoj - telling us it's ready for a review. Just including our handles in a PR comment is enough that we'll see your PR and know to look at it. You can also reply to this issue including a link to your PR.
  • Once we've looked at that PR to ensure the overall structure and concept is sound, we'll ask you to make a PR into the main repo, and we'll finish the review there.

@alexcjohnson Hey, Alex! I stumbled through a few early mistakes, and I now feel I've gotten the additions quite close to complete. However, I'm struggling to bridge this final gap, which is resulting from a lack of understanding of how these underlying components are inheriting/importing from one another. Would it be possible to afford a few minutes of time from one of your team members? A brief conversation would most definitely be enough to get me moving in the right direction. If not possible, that's alright--I may just need a bit more time to consult with some friends whom are more experience than myself!

@VictorBezak
Copy link
Contributor

@invictus2010 It's a journey, my friend. Wasn't long ago that I couldn't even visualize what a simple program might look like lol. This is a first attempt at an open source PR, and it may or may not be accepted. The attempt is what matters though, for every naive piece of code you write gets you one step closer to creating elegant and optimal code. If you ever have questions along your journey, feel free to reach out.

@gjhami
Copy link

gjhami commented Sep 28, 2021

@VictorBezak thanks for your effort! Hoping the plotly folks can get this reviewed and merged sometime soon so I can put it to good use! As in all projects I'm sure time is short and trello boards overflow. I just wanted to say thanks to both Victor and the Plotly team for continuing to make a great open source project even better and to express my continued interest in this feature.

It looks like the PR is already awaiting review, but if there's anything I can do to help please let me know!

@VictorBezak
Copy link
Contributor

VictorBezak commented Apr 10, 2022

@gjhami @invictus2010 I've been having trouble prioritizing this, would you guys like to colab on getting this ready to go? I find it's a little easier for me to make time for open-source when there's a social/team aspect to it. Would be a casual, zero expectation working session that we could schedule weekly or bi-weekly! Just let me know! I'm going to make this a higher priority in the mean time, so we'll get this done either way!

@invictus2010
Copy link

invictus2010 commented Apr 11, 2022 via email

@VictorBezak
Copy link
Contributor

That’s awesome! It’s been some time since I’ve looked at this code and I’m not a dev in my full-time gig, but I’m interested in helping out. I’m on vacation this week and then start my new job. TLDR; won’t be able to help for the next 2 weeks, but could link up after that if you don’t solve it before then

Sounds great, man! I hope you enjoyed your vacation and have a great first week! Happy to do some casual co-lab whenever is convenient for you. Shoot me an email at [email protected] whenever you get settled with your new job and have a weekend where you feel up for it. I'll be able to catch you up to speed with where I'm at and we'll just chat and see if we can't make some progress!

@VictorBezak
Copy link
Contributor

I've been receiving help for the last 5 weeks from fellow developer, Filipe Santiago @filipesantiagoAM, and together we've managed to put together an MVP solution! This still needs some tests and approvals before being merged, but sharing the PR here for public visibility!

#6356

@archmoj
Copy link
Contributor

archmoj commented Jan 19, 2023

Resolved by #6356.

@archmoj archmoj closed this as completed Jan 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature something new
Projects
None yet
Development

No branches or pull requests