Skip to content

Axis titles overlapping axis tick labels #1504

@cbailiss

Description

@cbailiss

Hello

I am having problems with the axis titles being far too close or overlapping the text of the labels (tick text) on each axis.

Example:
https://plot.ly/~cbailiss/5/incidence-by-age-range-and-gender/

The two axis titles should be further away from the numbers/categories on each axis. How can this be accomplished?

If the font size of the axis tick labels is increased, both the positions of the axis titles and the positions of the plot (i.e. where the x and y axes are drawn) do not change to adapt to the increased space occupied by the axis tick labels. Ever more of the labels overlaps with the title. Eventually, the labels themselves do not fit into the plot.
https://plot.ly/~cbailiss/7/incidence-by-age-range-and-gender/

It seems the rendering/layout algorithm doesn't pay attention to the width of the labels, which seems like a significant bug. Note, in the above examples, I am specifying a tickformat. Is this the cause of the bug?

For reference, the two plots above were produced from R, with the following code:

plot_ly(AgeGenderIncidence3, x = ~AgeRange2, y = ~F, type = 'bar', name = 'F', marker = list(color = 'rgb(255,91,188)')) %>%
  add_trace(y = ~M, name = 'M', marker = list(color = 'rgb(91,217,255)')) %>%
  layout(title="<b>Incidence By Age Range and Gender</b>", 
         titlefont=list(family="Arial", size=18, color="#2E008B"),
         xaxis = list(title = '<b>Age Range</b>', 
                      titlefont=list(family="Arial", size=16, color="#2E008B"),
                      tickfont=list(family="Arial", size=11, color="#343434")), 
         yaxis = list(title = '<b>Incidence</b>', tickformat=',.0', hoverformat=',.0',
                      titlefont=list(family="Arial", size=16, color="#2E008B"),
                      tickfont=list(family="Arial", size=14, color="#343434")), 
         barmode = 'group')

In the second example above, the size 14 was changed to size 20.

An example (produced with a different library) that is more what I am looking for is:
https://1drv.ms/i/s!ApqRkiJX6gQSg5odXumwaUNXuSl23g

Thanks

Chris

Activity

etpinard

etpinard commented on Mar 21, 2017

@etpinard
Contributor

duplicate of #296 or maybe I'm not understanding this issue correctly.

cbailiss

cbailiss commented on Mar 21, 2017

@cbailiss
Author

Possibly, but that issue doesn't refer to the (a) axis titles, or (b) the effects that tickformat has.
Would prefer to leave this open so that any change/fix is tested to work with:
a) the titles - i.e. the positioning of axes needs to consider that both the axis labels fit into the plot, and that the axis titles still fit.
b) the tickformat - in my examples, the default formatting of the values fits into the available space, but the tickformat formatted values do not fit.

cbailiss

cbailiss commented on Mar 21, 2017

@cbailiss
Author

We've had some discussions at our organisation this afternoon and this issue is large enough for us (and, judging by #296, has been around for a long-ish time) that we're probably going to have to purchase a competitor product, which is a shame since there is a lot to like about plot.ly.
PS. This is not meant to sound like a rant - but I wanted to give some clear feedback about how significant a limitation this issue is.

hy9be

hy9be commented on Mar 21, 2017

@hy9be
Contributor

@cbailiss Ignore me if this sounds like nonsense, but I think the point of an open source project is to leverage and contribute. Github.com is not a site for customer service. Why not just sit down with your team and try if it is possible to fix the issue here. My team is also using Plotly for our project but we consider it as also our responsibility to contribute back to this project. Just FYI.

cbailiss

cbailiss commented on Mar 21, 2017

@cbailiss
Author

@hy9be Fair comment. I was making the comment based on the fact plot.ly has a chargable element to it - granted not for (some/all?) use of the libraries. I am assuming (maybe wrongly) there is some element of funding from the chargable plot.ly services into the development of the graphics libraries. If so, it may be that at some point in time plot.ly are looking at how to prioritize that investment. My comment was coming from that point of view. Not a customer complaint though appreciate it might have read like that.

cpsievert

cpsievert commented on Mar 21, 2017

@cpsievert

@cbailiss FWIW you can also customize the margins -- plot_ly() %>% layout(margin = list(l = 100))

cbailiss

cbailiss commented on Mar 21, 2017

@cbailiss
Author

@cpsievert Thanks for the suggestion. That helps a little as a workaround. It means it is possible to stop the title overlapping the labels, though visually the title is immediately adjacent to the labels (a bit too close for high readability), and it is a bit of trial and error to work out the correct margin size depending on the length of the values displayed on the axis. But, still helpful. Thanks.

cbailiss

cbailiss commented on Mar 21, 2017

@cbailiss
Author

@cpsievert Specifying a tickprefix helps further:
plot_ly() %>% layout(margin=list(l = 100), yaxis=list(tickprefix=" "))
This pushes the y-axis title further away from the labels to improve the appearance/readability. This is all still a workaround though - since the margin value that is needed varies depending on the length of the axis tick labels that are being displayed (obviously ideally the plotly layout logic would determine this). Thanks again.

jackparmer

jackparmer commented on Mar 21, 2017

@jackparmer
Contributor

we're probably going to have to purchase a competitor product, which is a shame since there is a lot to like about plot.ly.

@cbailiss Do you want to just purchase plotly dev. time for a fix to your liking instead? Will probably be cheaper than a competitor commercial product and will benefit the plotly.js ecosystem as a whole 👍

https://plot.ly/products/consulting-and-oem/

6 remaining items

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

Metadata

Metadata

Labels

bugsomething broken

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

    Axis titles overlapping axis tick labels · Issue #1504 · plotly/plotly.js