question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Axis titles overlapping axis tick labels

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:6
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

20reactions
hy9becommented, Mar 21, 2017

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

9reactions
nicolaskruchtencommented, Mar 2, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Resize the Plot Area in Excel Chart - Titles and Labels Overlap
This post and video answers a question on how to resize the plot area of a chart to prevent the axis titles and...
Read more >
Python, x-axis title is overlapping the tick labels in matplotlib
I'm plotting a graph and the x-axis label is not visible in the graph. enter ...
Read more >
Stagger Axis Labels to Prevent Overlapping - Peltier Tech
When you have a chart that is too narrow, and has too many axis labels, or the labels it has are too long,...
Read more >
Title for Primary Vertical Axis is overlapping the values
I want the title box to move to the left of the axis values so that the axis values can be seen. I...
Read more >
FAQ-121 What can I do if my tick labels are too ... - OriginLab
If tick labels in your 2D graph overlap, there are three Axis dialog box controls -- all located on the Tick Labels >...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found