Sorting subplot vertical bar chart by y axis

📊 Plotly Python
1

Hi guys,

I am trying to build a subplot with a horizontal bar chart.

I’ve got couple of problems which I am not sure if it’s due to subplot or bar chart specific settings.

First problem is I am unable to sort the Y axis of the horizontal bar chart. I would like to have my “year-month” y-axis in ascending order

Below is my trace for subplot1:

trace1subplot1 = dict(type=‘bar’,
y= df_sorted.index.get_level_values(‘Year-Month’),
x= df_sorted[‘total_sum’],
text=df_sorted[‘total_sum’],
textposition = ‘auto’,
textfont = dict(
color=’#ffffff’
),
name=‘Spent’,
orientation = ‘h’,
showlegend=False,
marker=dict(color=[], line= dict(width= 1)),
)
fig = tools.make_subplots(rows=1, cols=6)
fig.append_trace(trace1subplot1, 1, 1)
fig[‘layout’][‘xaxis1’].update(showgrid=False,showticklabels=False)
fig[‘layout’].update(height=600)

app.layout = html.Div([
html.Div([
html.H3(‘Test’),
dcc.Graph(id=‘subplot1’,
figure={‘data’:fig,
‘layout’:go.Layout(dict(
title=‘Test’,
showlegend=False,
yaxis=dict(
zeroline=False, # no thick y=0 line
showgrid=False, # no horizontal grid lines
showticklabels=False # no y-axis tick labels
),))}
)], className=“six column”),

                ], className="row")

app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})

This is the dataextract
X-Axis: df_sorted[‘total_sum’]
Year-Month
Total 2972329.0
2018-1 352257.0
2018-2 305853.0
2018-3 383169.0
2018-4 330020.0
2018-5 342194.0
2018-6 342265.0
2018-7 536742.0
2018-8 379829.0
Name: total_sum, dtype: float64

Y-Axis: df_sorted.index.get_level_values(‘Year-Month’)
Index([‘Total’, ‘2018-1’, ‘2018-2’, ‘2018-3’, ‘2018-4’, ‘2018-5’, ‘2018-6’,
‘2018-7’, ‘2018-8’],
dtype=‘object’, name=‘Year-Month’)

and this is the result:

image

Second problem is “Total” value is not being displayed, value starts from 2018-1

Not sure what I am missing here or doing it wrong!

Thanks for looking into this.

Kind Regards,
R

2

Hi @rahul,

If you just want to reverse the order to yaxis labels you could reverse the sort order of df_sorted before constructing the bar trace.

Alternatively the order of non-numeric axis labels can be configured by the categoryorder axis parameter (https://plot.ly/python/reference/#layout-yaxis-categoryorder). So here you would set the categoryorder parameter of the layout.yaxis object.

Hope that helps!
-Jon

1 Like
3

Hi @jmmease,

Thanks for getting back on this. The reason I created df_sorted was because the graph doesn’t seems to respect the order in the dataframe.

So basically df data looks like below:

Year-Month
2018-1 352257.0
2018-2 305853.0
2018-3 383169.0
2018-4 330020.0
2018-5 342194.0
2018-6 342265.0
2018-7 536742.0
2018-8 379829.0
Total 2972329.0

df_sorted is as below:

Year-Month
Total 2972329.0
2018-1 352257.0
2018-2 305853.0
2018-3 383169.0
2018-4 330020.0
2018-5 342194.0
2018-6 342265.0
2018-7 536742.0
2018-8 379829.0

doesn’t matter which one I use graph Y-axis doesn’t seems to change, also it doesn’t show “Total” value.

I have tried categoryorder too, not sure if I am doing it wrong?

app.layout = html.Div([
html.Div([
html.H3(‘Test’),
dcc.Graph(id=‘subplot1’,
figure={‘data’:fig,
‘layout’:go.Layout(dict(
title=‘Test’,
showlegend=False,
yaxis=dict(
zeroline=False, # no thick y=0 line
showgrid=False, # no horizontal grid lines
showticklabels=False,
categoryorder="category ascending"
),))}
)], className=“six column”),

                ], className="row")

app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})

My Y axis value is:

Index([‘Total’, ‘2018-1’, ‘2018-2’, ‘2018-3’, ‘2018-4’, ‘2018-5’, ‘2018-6’,
‘2018-7’, ‘2018-8’],
dtype=‘object’, name=‘Year-Month’)

I have tried converting it to list by doing .format() but that’s also not working!

What is odd is when I add [’.’] to y= df_sorted.index.get_level_values(‘Year-Month’) + [’.’] it shows the total but still not respecting the order of the df_sorted.

tempsnip

Thanks for your help.

Kind Regards,
R

4

@jmmease I have found a solution this issue! Very simple

Instead of sorting the data like this:
Year-Month
2018-1 352257.0
2018-2 305853.0
2018-3 383169.0
2018-4 330020.0
2018-5 342194.0
2018-6 342265.0
2018-7 536742.0
2018-8 379829.0
Total 2972329.0

Data should be sorted in following order to work properly
Year-Month
2018-8 379829.0
2018-7 536742.0
2018-6 342265.0
2018-5 342194.0
2018-4 330020.0
2018-3 383169.0
2018-2 305853.0
2018-1 352257.0
Total 2972329.0

Thanks again for your help!

Kind Regards,
R

1 Like