Deal with overlapping in multiple x-axes in plotly python

Question

I am trying to create a plot using plotly with multiple axes. And for this, I am using the following code:

#Plotly libraries and options for graphic logic
from plotly.io import to_html
import plotly.io as pio
pio.renderers.default='browser'
import plotly.graph_objects as go

#Generic libraries 
import pandas as pd
import numpy as np
from datetime import datetime

input_df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')
threshold =2.8
name_yaxis="Gap"
input_df["AAPL.High"] = (input_df["AAPL.High"]-min(input_df["AAPL.High"]))*(threshold)/(max(input_df["AAPL.High"])-min(input_df["AAPL.High"]))+np.random.uniform(0.3,0.4,1)
ID_TAIL = "ID_1"

fig = go.Figure()



fig.add_trace(go.Scatter(x=input_df['Date'], y=input_df['AAPL.High'],
                    mode='lines+markers',
                    marker_size=12,
                    line = dict(color="#C4C4C4"),
                    marker=dict(color=( (0 < input_df['AAPL.High']) & (input_df['AAPL.High'] < threshold)).astype('int'),
                                colorscale=[[0, '#A51890'], [1, '#3BBFFE']]
                                ),
                    showlegend=False,
                    xaxis="x1",
                    name = ""
                        )
                )

my_x = [ID_TAIL + "_" +format(i, '04d') + "_0" for i in range(1,input_df.shape[0])]
fig.add_trace(go.Scatter(x=my_x, y=input_df['AAPL.High'],
                    mode='lines+markers',
                    marker_size=12,
                    line = dict(color="#C4C4C4"),
                    marker=dict(color=( (0 < input_df['AAPL.High']) & (input_df['AAPL.High'] < threshold)).astype('int'),
                                colorscale=[[0, '#A51890'], [1, '#3BBFFE']]
                                ),
                    showlegend=False,
                    xaxis="x2",
                    name = ""
                        )
                )




#== Add title boxes ==#

# Add title legend for box status
fig.add_annotation( text="<b>Health status<b>", xref="paper", yref="paper",
                   x=1.02, xanchor="left",
                   y=0.9, yanchor="bottom",    # Same y as legend below
                   showarrow=False,
                   font = dict(family = "Roboto", size = 10))


  

#== End ==#

My problem is that as you can see in the following image, the ticks are overlapping:

So, my question is, how to create space between them?

Thanks in advance.

You could add a custom width, like so: `width=800, height=400` or when you loop through input_df you could skipp odd values, like so: `for i in range(1,input_df.shape[0], 2)` — WildWilyWilly, Nov 23 '20 at 14:09
Does this answer your question? [Matplotlib showing x-tick labels overlapping](https://stackoverflow.com/questions/26700598/matplotlib-showing-x-tick-labels-overlapping) — ombk, Nov 23 '20 at 14:48
@DannyHern have you tried checking this https://stackoverflow.com/questions/26700598/matplotlib-showing-x-tick-labels-overlapping — ombk, Nov 23 '20 at 14:49
@DannyHern since I cannot really help, i will just provide links that seem close to solving your issue, check this https://stackoverflow.com/questions/52391451/how-do-i-add-space-between-the-tick-labels-and-the-graph-in-plotly-python — ombk, Nov 23 '20 at 16:03
If you'd be interested in placing the second x-axis on top, I'll draft an answer for you. — S3DEV, Nov 23 '20 at 20:11
@DannyHern How did the provided suggestions work out for you? — vestland, Nov 24 '20 at 12:42

S3DEV · Answer 1 · 2020-11-23T20:23:42.620

Here's a quick fix. Pop this line at the bottom of your code, and it will move xaxis2 to the top of the graph:

fig.update_layout({'xaxis2': {'side': 'top', 'tickangle': 45, 'nticks': 50}})

Output:
Shifting the secondary xaxis to the top will look like this.

Another Option:
Another approach would be to concatenate the axis titles into a single string, and display the concatenated string on the x-axis. This SO answer demonstrates this logic.

score 1 · Answer 2 · answered Nov 23 '20 at 19:58

You can reduce the number of ticks by adding the following line

fig.update_layout(xaxis={'nticks': 8, 'tickangle': 90}, xaxis2={'nticks': 8, 'tickangle': 90})

Depending on the size of the plot, ticks may still overlap. In that case, you can either further reduce the tick number or hardcode the tick positions:

tickvalsX = ['2015-07', '2016-01', '2016-07', '2017-01']
tickvalsY = ['ID_1_0001_0', 'ID_1_00100_0', 'ID_1_0200_0', 'ID_1_0300_0', 'ID_1_0400_0', 'ID_1_0500_0']
fig.update_layout(xaxis={'tickmode': 'array', 'tickangle': 90, 'tickvals': tickvalsX}, xaxis2={'tickmode': 'array', 'tickangle': 90, 'tickvals': tickvalsY})

Further style elements of the axis you can find in the Plotly reference.

Deal with overlapping in multiple x-axes in plotly python

2 Answers2