Strange behavior in trace title positioning

📊 Plotly Python
1

Hi plotly community!!!

I m posting here a question concerning positioning trace title in complex multi-graph charts. In the code below i m ploting in a grid of 2 rows and 4 columns, 4 bar opposite bar chart for comparison purpose. these charts represent category of food products consumed in different geographic area(see pictures).
I don’t know why but the trace name of the first chart appears above the trace and not under and i did not figure where i can modify this behavior. I thought in the update_xaxes section where the trace name is defined but did not figure which option deal trace’s names behavior. Your help will surely be awesome!!!
Here is the code:


fig = make_subplots(rows=2, cols=4,horizontal_spacing= 0.003,vertical_spacing= 0.06,shared_xaxes=False,
                    shared_yaxes=True)

fig.append_trace(go.Bar(x=dfref['Frequency'],
                     y=dfref['CategorySubset'], 
                     text=dfref['Frequency'].map('{:,.0f}'.format), #Display the numbers with thousands separators in hover-over tooltip 
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#ace1d5'), 
                     1, 1) # 1,1 represents row 1 column 1 in the plot grid

fig.append_trace(go.Bar(x=catnam.Frequency,
                     y=catnam['CategorySubset'], 
                     text=catnam.Frequency.map('{:,.0f}'.format),
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#367cbc'), 
                     1, 2) # 1,2 represents row 1 column 2 in the plot grid

fig.append_trace(go.Bar(x=dfref['Frequency'],
                     y=dfref['CategorySubset'], 
                     text=dfref['Frequency'].map('{:,.0f}'.format), #Display the numbers with thousands separators in hover-over tooltip 
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#ace1d5'), 
                     1, 3) # 1,1 represents row 1 column 1 in the plot grid

fig.append_trace(go.Bar(x=catsam.Frequency,
                     y=catsam['CategorySubset'], 
                     text=catsam.Frequency.map('{:,.0f}'.format),
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#fff167'), 
                     1, 4) # 1,2 represents row 1 column 2 in the plot grid

fig.append_trace(go.Bar(x=dfref['Frequency'],
                     y=dfref['CategorySubset'], 
                     text=dfref['Frequency'].map('{:,.0f}'.format), #Display the numbers with thousands separators in hover-over tooltip 
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#ace1d5'), 
                     2, 1) # 1,1 represents row 1 column 1 in the plot grid

fig.append_trace(go.Bar(x=cateas.Frequency,
                     y=cateas['CategorySubset'], 
                     text=cateas.Frequency.map('{:,.0f}'.format),
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#f46280'), 
                     2, 2) # 1,2 represents row 1 column 2 in the plot grid

fig.append_trace(go.Bar(x=dfref['Frequency'],
                     y=dfref['CategorySubset'], 
                     text=dfref['Frequency'].map('{:,.0f}'.format), #Display the numbers with thousands separators in hover-over tooltip 
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#ace1d5'), 
                     2, 3) # 1,1 represents row 1 column 1 in the plot grid

fig.append_trace(go.Bar(x=catsas.Frequency,
                     y=catsas['CategorySubset'], 
                     text=catsas.Frequency.map('{:,.0f}'.format),
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#a981a9'), 
                     2, 4) # 1,2 represents row 1 column 2 in the plot grid






fig.update_xaxes(showticklabels=False,title_text="Europe-28", row=1, col=1,range=[22000,0])
fig.update_xaxes(showticklabels=False,title_text="Northern America", row=1, col=2,range=[0,22000])

fig.update_xaxes(showticklabels=False,title_text="Europe-28", row=1, col=3,range=[22000,0])
fig.update_xaxes(showticklabels=False,title_text="Southern America", row=1, col=4,range=[0,22000])

fig.update_xaxes(showticklabels=False,title_text="Europe-28", row=2, col=1,range=[22000,0])
fig.update_xaxes(showticklabels=False,title_text="Eastern Asia", row=2, col=2,range=[0,22000])

fig.update_xaxes(showticklabels=False,title_text="Europe-28", row=2, col=3,range=[22000,0])
fig.update_xaxes(showticklabels=False,title_text="Southern Asia", row=2, col=4,range=[0,22000])

fig.update_layout(title_text="Food product category Ranking by geographic areas", 
                  width=1400, 
                  height=1400,
                  title_x=0.5,
                  xaxis1={'side': 'top'},
                  xaxis2={'side': 'top'})


fig.show()

and the results is here:

CatComparison
CatComparison1400×1400 101 KB

Thanks again!!!

2

HI @TriXs welcome to the forums.

Could you share your data (or equivalent dummy data) so that we can try some stuff?

3

Yes of course

here is the link to file

thanks :hugs:

4

Hi @TriXs, I can’t reproduce this with the code + data provided. This throws an error catnam and possibly others not defined.

import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd

dfref = pd.read_csv('PlotlyCommDf.csv', delimiter=',')

fig = make_subplots(rows=2, cols=4,horizontal_spacing= 0.003,vertical_spacing= 0.06,shared_xaxes=False,
                    shared_yaxes=True)

fig.append_trace(go.Bar(x=dfref['Frequency'],
                     y=dfref['CategorySubset'], 
                     text=dfref['Frequency'].map('{:,.0f}'.format), #Display the numbers with thousands separators in hover-over tooltip 
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#ace1d5'), 
                     1, 1) # 1,1 represents row 1 column 1 in the plot grid

fig.append_trace(go.Bar(x=catnam.Frequency,
                     y=catnam['CategorySubset'], 
                     text=catnam.Frequency.map('{:,.0f}'.format),
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#367cbc'), 
                     1, 2) # 1,2 represents row 1 column 2 in the plot grid

fig.append_trace(go.Bar(x=dfref['Frequency'],
                     y=dfref['CategorySubset'], 
                     text=dfref['Frequency'].map('{:,.0f}'.format), #Display the numbers with thousands separators in hover-over tooltip 
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#ace1d5'), 
                     1, 3) # 1,1 represents row 1 column 1 in the plot grid

fig.append_trace(go.Bar(x=catsam.Frequency,
                     y=catsam['CategorySubset'], 
                     text=catsam.Frequency.map('{:,.0f}'.format),
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#fff167'), 
                     1, 4) # 1,2 represents row 1 column 2 in the plot grid

fig.append_trace(go.Bar(x=dfref['Frequency'],
                     y=dfref['CategorySubset'], 
                     text=dfref['Frequency'].map('{:,.0f}'.format), #Display the numbers with thousands separators in hover-over tooltip 
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#ace1d5'), 
                     2, 1) # 1,1 represents row 1 column 1 in the plot grid

fig.append_trace(go.Bar(x=cateas.Frequency,
                     y=cateas['CategorySubset'], 
                     text=cateas.Frequency.map('{:,.0f}'.format),
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#f46280'), 
                     2, 2) # 1,2 represents row 1 column 2 in the plot grid

fig.append_trace(go.Bar(x=dfref['Frequency'],
                     y=dfref['CategorySubset'], 
                     text=dfref['Frequency'].map('{:,.0f}'.format), #Display the numbers with thousands separators in hover-over tooltip 
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#ace1d5'), 
                     2, 3) # 1,1 represents row 1 column 1 in the plot grid

fig.append_trace(go.Bar(x=catsas.Frequency,
                     y=catsas['CategorySubset'], 
                     text=catsas.Frequency.map('{:,.0f}'.format),
                     textposition='inside',
                     orientation='h', 
                     width=0.7, 
                     showlegend=False, 
                     marker_color='#a981a9'), 
                     2, 4) # 1,2 represents row 1 column 2 in the plot grid






fig.update_xaxes(showticklabels=False,title_text="Europe-28", row=1, col=1,range=[22000,0])
fig.update_xaxes(showticklabels=False,title_text="Northern America", row=1, col=2,range=[0,22000])

fig.update_xaxes(showticklabels=False,title_text="Europe-28", row=1, col=3,range=[22000,0])
fig.update_xaxes(showticklabels=False,title_text="Southern America", row=1, col=4,range=[0,22000])

fig.update_xaxes(showticklabels=False,title_text="Europe-28", row=2, col=1,range=[22000,0])
fig.update_xaxes(showticklabels=False,title_text="Eastern Asia", row=2, col=2,range=[0,22000])

fig.update_xaxes(showticklabels=False,title_text="Europe-28", row=2, col=3,range=[22000,0])
fig.update_xaxes(showticklabels=False,title_text="Southern Asia", row=2, col=4,range=[0,22000])

fig.update_layout(title_text="Food product category Ranking by geographic areas", 
                  width=1400, 
                  height=1400,
                  title_x=0.5,
                  xaxis1={'side': 'top'},
                  xaxis2={'side': 'top'})


fig.show()
5

Thanks for the try, but it’s very strange… Well initially the dataset are 5 different ones that i have concatenated into one for the demonstration purpose (that’s why a colum is called Dataframe). I think the issue came from that and the code must be updated for plotly to get the right panda series to work. I will update the code soon for that purpose with this data frame