✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How to create plot with duplicate xaxis labels and 2 xaxis in the same plot?

I’m a beginner in buildng plots using plotly and want to create a plotly bar graph using python having duplicate x label values and having 2 different labels. The first label needs to be grouped by second label.

Attaching image of the sample plot:

Can anyone help me implement the above plot?

Thanks for posting in the community forum!

You might find the discussion in Multicategory Axis Type Example? to be helpful, as it addresses a very similar issue to the one you are having.

To get you started creating your plot, here is some example code I came up with:

import plotly.graph_objects as go
x = [
    ["usa", "usa", "usa", "usa", "usa", 
     "africa", "africa", "africa", "africa", "africa", "africa", 
     "china", "china", "china", "china", "china"],
    ["abc", "xyz", "pqr", "mno", "fgh", 
     "xyz", "opo", "kjh", "pqr", "bcc", 
     "pqr", "tyu", "opo", "xyz", "ghj"]
]
fig = go.Figure()
fig.add_bar(x=x,y=[18, 10, 4, 4, 4, 14, 0, 0, 0, 0, 10, 4, 4, 0, 0])
fig.show()

1 Like

@developer0109

To get the bars colored with different color for each category, set also the 'marker_color`:

import plotly.graph_objects as go
x = [
    ["usa", "usa", "usa", "usa", "usa", 
     "africa", "africa", "africa", "africa", "africa", 
     "china", "china", "china", "china", "china"],
    ["abc", "xyz", "pqr", "mno", "fgh", 
     "xyz", "opo", "kjh", "pqr",  "bcc", 
     "pqr", "tyu", "opo", "xyz", "ghj"]
]
fig = go.Figure()
fig.add_bar(x=x,
            y=[18, 10, 4, 4, 4,
               14, 0, 0, 0, 0, 
               10, 4, 4, 0, 0],
             marker_color=['green']*5+['orange']*5+['red']*5) 
fig.update_layout(width=800, height=500)            
fig.show()

1 Like

I encourage anyone who has found this discussion helpful and wants to learn more about creating figures with multicategory axes to check out https://plotly.com/python/axes/#subcategory-multicategory-axes.

@empet I don’t think it’s a bug- I made a typo when transcribing @developer101’s figure which is why the y-values for China are not mapped consistently with their example- opo and tyu are reversed!

@joseph.damiba

I corrected data to coincide with @developer0109’s data and now the plot its OK. It’s a bit confusing the permutation of initial category names for China, but the y-values are also permuted, and the final chart reflects the information encoded by data.

Thanks for providing the solution @empet and @joseph.damiba.

Two quick questions:-

  1. Why is the sequence of X axis labels when plotted on the graph is getting changed? Is there a way to keep the sequence as the original one? The reason being for every category, the bars should be plotted in a sorted manner with decreasing order as shown in original graph.
  2. Is there a way to remove the separation lines from between the various categories as there may be a case where the X2 axis label will be longer in character length and may cut or intersect the separation which will give a bad aesthetics to the plot?

Please let me know if both of these are possible.

@empet @joseph.damiba @developer0109 regarding the order of categories, this is discussed in https://github.com/plotly/plotly.js/issues/3723 and Multicategory xaxis label arrangement is not proper.

2 Likes

@joseph.damiba @Emmanuelle

There are a certain more changes I’m looking into:-

  • Is there a way to increase the gap between bars of different countries for e.g. gap between the last green bar of “usa” and the first yellow bar of “africa” should be more as can be seen in the snapshot plot of the original question?
  • Is there a way to increase the bar gap between bars of the same country as in the original question? I tried modifying bargap value in update.layout function of my code but nothing is changing.

Appreciate your help. Thanks!