How can I left-align numerical y axis labels?

I am visualizing percentage data but would only like to show the percentage symbol on the topmost line’s y axis label. Here’s a simplified set of code to illustrate this scenario:

import pandas as pd
import plotly.express as px
df_placeholder_data = pd.DataFrame(
    {'X_Val': {0: 'A', 1: 'B', 2: 'C', 3: 'D'},
 'E': {0: 1, 1: 2, 2: 3, 3: 4},
 'Y_Val': {0: 73, 1: 24, 2: 39, 3: 85},
 'F': {0: 3, 1: 6, 2: 9, 3: 12},
 'G': {0: 4, 1: 8, 2: 12, 3: 16}})
fig = px.bar(df_placeholder_data, x = 'X_Val', y = 'Y_Val')
fig.update_layout(margin_pad = 3,
                  yaxis_ticksuffix = '%',
                 yaxis_showticksuffix = 'last')
fig

This code produces the following output:

Note that, due to the inclusion of the percentage symbol, the ‘80%’ Y axis label starts to the left of all other labels. Is there a way to get the other labels to begin at the same point as the 80% label? The desired output would look like this:

It looks like y axis labels can’t yet be left aligned, but if there’s some other ‘hack’ that could allow these labels to start at the same location (e.g. updating the HTML underlying the chart; adding extra spaces to labels (which I wasn’t sure was possible for numerical labels like these; adding a string alias for each label), please let me know!

did you happen to try: How can I left-align numerical y axis labels? - :bar_chart: Plotly Python - Plotly Community Forum

2 Likes

You can try with the ticks and tickcolor too.
Not perfectly padded towards left but almost. :slight_smile:

import pandas as pd
import plotly.express as px
df_placeholder_data = pd.DataFrame(
    {'X_Val': {0: 'A', 1: 'B', 2: 'C', 3: 'D'},
 'E': {0: 1, 1: 2, 2: 3, 3: 4},
 'Y_Val': {0: 73, 1: 24, 2: 39, 3: 85},
 'F': {0: 3, 1: 6, 2: 9, 3: 12},
 'G': {0: 4, 1: 8, 2: 12, 3: 16}})
fig = px.bar(df_placeholder_data, x = 'X_Val', y = 'Y_Val')
fig.update_layout(
    yaxis=dict(
        ticks="outside",     
        ticklen=10,            
        tickwidth=2,         
        tickcolor='#fafafa',# #efefe8', --> Try a better Hex val of color
        automargin=True       
    ),
    xaxis=dict(
        ticks="outside"
    ),
    yaxis_ticksuffix='%',     
    yaxis_showticksuffix='last'
)
fig
tag

rnppy

Hi @KBurchfiel ,

here is the implementation that @mikedzhal suggested.
I added some modification how the yaxis title will be displayed.

import pandas as pd
import plotly.express as px
df_placeholder_data = pd.DataFrame(
    {'X_Val': {0: 'A', 1: 'B', 2: 'C', 3: 'D'},
 'E': {0: 1, 1: 2, 2: 3, 3: 4},
 'Y_Val': {0: 73, 1: 24, 2: 39, 3: 85},
 'F': {0: 3, 1: 6, 2: 9, 3: 12},
 'G': {0: 4, 1: 8, 2: 12, 3: 16}})
fig = px.bar(df_placeholder_data, x = 'X_Val', y = 'Y_Val')

fig.update_layout(margin_pad = 0,
                  yaxis_ticksuffix = '%',
                  yaxis_showticksuffix = 'last',
                  yaxis_anchor="free",
                  yaxis_side="right",
                  yaxis_shift=-30,
                  yaxis_title = None,
                 )
fig.add_annotation(x=-0.07, y=0.5, xref="paper", yref="y domain", showarrow=False, text="Y_Val", font=dict(size=14), textangle=-90)

print(fig.__dict__)
fig.show()

That’s very helpful, thank you! And thanks @mikedzhal for suggesting this option.

Here’s what the output looks like for reference: (I fixed the plot to 700 pixels in width and 450 pixels in height, then changed the argument for the add_annotation() call’s x parameter to -0.12 so that it wouldn’t overlap with the y axis labels.

2 Likes