Skip to content
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

Automargin clipping ticklabels #2985

Closed
sglyon opened this issue Sep 7, 2018 · 7 comments · Fixed by #3510
Closed

Automargin clipping ticklabels #2985

sglyon opened this issue Sep 7, 2018 · 7 comments · Fixed by #3510
Assignees
Labels
bug something broken

Comments

@sglyon
Copy link

sglyon commented Sep 7, 2018

I'm trying to use *axis.automargin to get the minimum necessary margin to display all tick labels/axis titles.

To do that I set layout.margin.[tblr] to 0 and then set layout.[xy]axis.automargin to true.

When I do this and do not have axis titles, the tick labels are slightly clipped. See this pen for an example: https://codepen.io/anon/pen/XPzEeN

When in the pen if you uncomment the line that sets layout.yaxis.title = "", you'll notice that the ticks are no longer clipped.

@sglyon
Copy link
Author

sglyon commented Sep 7, 2018

Update, if you do have a yaxis title that is long enough to run into ticks, it will cover them up.

I've updated the pen with another section that has

  // Uncomment the line below and the yaxis.title will cover up some ticks
  // layout.yaxis.title = "This is y and it runs into ticks"

and if you uncomment the long title you can see what I mean.

It is very possible that I'm simply trying to use this in the wrong way. If there is a better/easier way to reach my goal (minimum margin where nothing is clipped), I'd love to hear it

@etpinard etpinard added the bug something broken label Sep 13, 2018
@etpinard
Copy link
Contributor

Related: #2434

@zbjornson
Copy link

Here's a particularly egregious example of I think the same issue: https://codepen.io/anon/pen/XOWWNa

@cldougl
Copy link
Member

cldougl commented Jan 30, 2019

One of the goals of ddk is to provide reduced margins by default so we're running into this issue in most of our examples as the margin size is templated as in the example below:
https://codepen.io/plotly/pen/bzBOjL?editors=1010

@etpinard
Copy link
Contributor

etpinard commented Jan 31, 2019

Would setting a margin of 1px (together with ax.automargin:true) like in https://codepen.io/etpinard/pen/omBbBv be ok for now?

@wbrgss
Copy link
Contributor

wbrgss commented Jan 31, 2019

@etpinard Thanks for taking a look. I don't think this will work for us though; it seems any margin smaller than the tick size will mean clipped ticks — see the x-axis ticks on
https://codepen.io/anon/pen/GzrjxN

I've tried the layout.yaxis.title = "" trick, which appears to work well for most graphs, but that's not going to work for us with components that make use of plots flush with their container, such as the following (sorry for the lack of codepen)
datacard

If layout.yaxis.title = "" hack really is the best solution for now I think I'll do my best to work around the above issue with the flush-with-border plots.

@etpinard
Copy link
Contributor

Ah there is it:

image

My bad. I'll see If I can get a quick fix in for this thing. Thanks for reporting!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug something broken
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants