Axis titles overlapping axis tick labels

[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

[etpinard]

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

[cbailiss]

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]

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]

@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]

@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]

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

[cbailiss]

@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]

@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]

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/

[nicolaskruchten]

I'm happy to report that this is now fixed, with the addition of the *axis.automargin attribute. When set to true it will grow the plot margins so as to make room for both the tick labels and axis title :)

See #2243

[wjw19]

@cpsievert this line solved my problem perfectly - margin = list(l = 100)

[MinnML]

@nicolaskruchten I am having issue with axis.automargin feature in React. Please see react-plotly #334. Do you have any thoughts what might be missing?