Showing labels inside bar at the bottom, and showing bars at their max size

[mikenyc]

Howdy, I’m trying to execute a bar chart where the category label is anchored to the left of the bar area, and the value of that category is anchored to the right of the bar area… not the bar itself, but the bar if it were at the max value.

My efforts have left me with labels scaling INSIDE the bar based on it’s amplitude.

fig.add_trace(
go.Bar(x=[x.get(‘count’) for x in all_time], y=[x.get(‘name’) for x in all_time], textposition=‘inside’,
text=[x.get(‘label_count’) for x in all_time], orientation=‘h’, hovertext=entity_all_time_text,
name=“All Time”),
1, 1)

[atharvakatre]

Hi @mikenyc and welcome to the Plotly community!

You can set the author names as tick labels on your yaxis, and by using the property ticklabelposition we can display them inside the graph.

I have created a demo of the graph you showed above :

Code:

import plotly.graph_objects as go

x = ["Author A", "Author B", "Author C", "Author D"]
y = [27, 18, 12, 6]
p = ['90%', '60%', '40%', '20%']

fig = go.Figure(
        go.Bar(
            x=[30]*4,
            y=x,
            text=p,
            textposition="inside",
            textfont=dict(color="white"),
            orientation="h",
            marker_color="grey",
        )
)

fig.add_trace(
    go.Bar(
        x=y,
        y=x,
        orientation="h",
    )
)
fig.update_layout(title='Top Authors', barmode="overlay", showlegend=False, template="presentation")
fig.update_yaxes(
    tickmode="array",
    categoryorder="total ascending",
    tickvals=x,
    ticktext=x,
    ticklabelposition="inside",
    tickfont=dict(color="white"),
)
fig.update_xaxes(range=[0, 30], visible=False)

fig.show()

Hope this helps

[mikenyc]

That does the trick! Thanks so much!

[mikenyc]

Atharvakatre,

This solution draws the bars on top of the values (on the right), obscuring them.

Is there any way to change the z-order of the elements so that the bars aren’t on top?

Best,

Mike

[atharvakatre]

@mikenyc
As the percentage values on the right are from the bottom bar trace they are placed under the second bar trace.
One solution could be to place the percentage values outside the bar by setting textposition="outside" and slightly increasing the range on x axis to have room for the values.

Modified code:

import plotly.graph_objects as go

x = ["Author A", "Author B", "Author C", "Author D"]
y = [29.7, 18, 12, 6]
p = ['99%', '60%', '40%', '20%']

fig = go.Figure(
        go.Bar(
            x=[30]*4,
            y=x,
            text=p,
            textposition="outside",
            textfont=dict(color="black"),
            orientation="h",
            marker_color="grey",
        )
)

fig.add_trace(
    go.Bar(
        x=y,
        y=x,
        orientation="h",
    )
)
fig.update_layout(title='Top Authors', barmode="overlay", showlegend=False, template="presentation")
fig.update_yaxes(
    tickmode="array",
    categoryorder="total ascending",
    tickvals=x,
    ticktext=x,
    ticklabelposition="inside",
    tickfont=dict(color="white"),
)
fig.update_xaxes(range=[0, 32], visible=False)

fig.show()

[mikenyc]

Thanks. I think the best solution is to make the max range 1.2x so there’s a little room on the right side for the values… it’s slightly inaccurate. but the relative size of the bars is what’s important. Thanks again!