[FIXED] How to Tidy Up x-axes label in px express?

Issue

Im trying to tidy up my x-axes label from this :

Before

to this :

After

is there any parameter or atributte in px express could make it like that ?

Thank you

Solution

• have simulated your data
• taken approach that every second label is shown. Then to have all labels, need two x-axes. Clearly if two axes are used, two traces are required

import numpy as np
import pandas as pd
import plotly.express as px

regions = [
    "North Sumatra",
    "West Sumatra",
    "South Sumatra",
    "West Java, Central Java",
    "Kalimantan",
    "East Java",
    "Sulawesi",
    "Maluku",
]

df = pd.DataFrame({"region": regions, "value": np.random.randint(1, 20, len(regions))})

fig = px.bar(df, x="region", y="value")
# simulate a second trace for second xaxis
fig.add_traces(
    px.bar(df, x="region", y=np.zeros(len(regions))).update_traces(xaxis="x2").data
)
# configure labels against two axis
fig.update_layout(
    xaxis={
        "tickangle": 0,
        "anchor": "free",
        "position": 0.1,
        "tickmode": "array",
        "tickvals": df["region"].tolist()[::2],
    },
    xaxis2={
        "tickangle": 0,
        "overlaying": "x",
        "anchor": "free",
        "position": 0.05,
        "tickmode": "array",
        "tickvals": df["region"].tolist()[1::2],
    },
    yaxis={"domain": [0.1, 1]},
)

Answered By - Rob Raymond

Answer Checked By - Pedro (PHPFixing Volunteer)