Stacked bar chart returns unexpected output (Python, plotly)

Question

I have a df with three columns(Day-Shift, State, seconds).

Day-Shift   State          seconds
Day 01-05   A              7439
Day 01-05   STOPPED        0
Day 01-05   B              10
Day 01-05   C              35751
Night 01-05 C              43200
Day 01-06   STOPPED        7198
Day 01-06   F              18
Day 01-06   A              14
Day 01-06   A              29301
Day 01-06   STOPPED        6
Day 01-06   A              6663
Night 01-06 A              43200

My code to build a stacked bar chart is:

import plotly.express as px
fig = px.bar(df, x="Day-Shift", y="seconds", color="State")
fig.show()

But it returns this stacked bar chart.

The fault here is that the Day-Shift order is changed and the corresponding seconds are not in this chart. I cannot identify the error. Really appreciate your support!

DF:

{'Day-Shift': {0: 'Day 01-05',
  1: 'Day 01-05',
  2: 'Day 01-05',
  3: 'Day 01-05',
  4: 'Night 01-05',
  5: 'Day 01-06',
  6: 'Day 01-06',
  7: 'Day 01-06',
  8: 'Day 01-06',
  9: 'Day 01-06',
  10: 'Day 01-06',
  11: 'Night 01-06',
  12: 'Day 01-07',
  13: 'Night 01-07',
  14: 'Night 01-07',
  15: 'Night 01-07',
  16: 'Night 01-07',
  17: 'Night 01-07',
  18: 'Night 01-08',
  19: 'Night 01-08',
  20: 'Night 01-08',
  21: 'Night 01-08',
  22: 'Day 01-08',
  23: 'Day 01-08',
  24: 'Day 01-08',
  25: 'Night 01-09',
  26: 'Night 01-09',
  27: 'Night 01-09',
  28: 'Day 01-09',
  29: 'Day 01-09',
  30: 'Day 01-09',
  31: 'Day 01-09',
  32: 'Day 01-10',
  33: 'Night 01-10',
  34: 'Day 01-11',
  35: 'Day 01-11',
  36: 'Day 01-11',
  37: 'Day 01-11',
  38: 'Day 01-11',
  39: 'Night 01-11',
  40: 'Day 01-12',
  41: 'Night 01-12',
  42: 'Day 01-13',
  43: 'Day 01-13',
  44: 'Day 01-13',
  45: 'Day 01-13',
  46: 'Day 01-13',
  47: 'Day 01-13',
  48: 'Day 01-13',
  49: 'Night 01-13',
  50: 'Day 01-14',
  51: 'Day 01-14',
  52: 'Day 01-14',
  53: 'Day 01-14',
  54: 'Day 01-14',
  55: 'Day 01-14',
  56: 'Day 01-14',
  57: 'Day 01-14',
  58: 'Day 01-14',
  59: 'Night 01-14'},
 'State': {0: 'D',
  1: 'STOPPED',
  2: 'B',
  3: 'A',
  4: 'A',
  5: 'A',
  6: 'A1',
  7: 'A2',
  8: 'A3',
  9: 'A4',
  10: 'B1',
  11: 'B1',
  12: 'B1',
  13: 'B1',
  14: 'B2',
  15: 'STOPPED',
  16: 'RUNNING',
  17: 'B',
  18: 'STOPPED',
  19: 'B',
  20: 'RUNNING',
  21: 'D',
  22: 'STOPPED',
  23: 'B',
  24: 'RUNNING',
  25: 'STOPPED',
  26: 'RUNNING',
  27: 'B',
  28: 'RUNNING',
  29: 'STOPPED',
  30: 'B',
  31: 'D',
  32: 'B',
  33: 'B',
  34: 'B',
  35: 'RUNNING',
  36: 'STOPPED',
  37: 'D',
  38: 'A',
  39: 'A',
  40: 'A',
  41: 'A',
  42: 'A',
  43: 'A1',
  44: 'A2',
  45: 'A3',
  46: 'A4',
  47: 'B1',
  48: 'B2',
  49: 'B2',
  50: 'B2',
  51: 'B',
  52: 'STOPPED',
  53: 'A',
  54: 'A1',
  55: 'A2',
  56: 'A3',
  57: 'A4',
  58: 'B1',
  59: 'B1'},
 'seconds': {0: 7439,
  1: 0,
  2: 10,
  3: 35751,
  4: 43200,
  5: 7198,
  6: 18,
  7: 14,
  8: 29301,
  9: 6,
  10: 6663,
  11: 43200,
  12: 43200,
  13: 5339,
  14: 8217,
  15: 0,
  16: 4147,
  17: 1040,
  18: 24787,
  19: 1500,
  20: 14966,
  21: 1410,
  22: 2499,
  23: 1310,
  24: 39391,
  25: 3570,
  26: 17234,
  27: 47390,
  28: 36068,
  29: 270,
  30: 6842,
  31: 20,
  32: 43200,
  33: 43200,
  34: 2486,
  35: 8420,
  36: 870,
  37: 30,
  38: 31394,
  39: 43200,
  40: 43200,
  41: 43200,
  42: 36733,
  43: 23,
  44: 6,
  45: 4,
  46: 4,
  47: 3,
  48: 6427,
  49: 43200,
  50: 620,
  51: 0,
  52: 4,
  53: 41336,
  54: 4,
  55: 4,
  56: 4,
  57: 23,
  58: 1205,
  59: 43200}}

Answer 1

Your snippet seems to be running fine on my end:

import plotly.express as px
fig = px.bar(df, x="Day-Shift", y="seconds", color="State")
fig.show()

And produces this plot:

So then it's either an issue with your version, or, more likely, your data. The first thing you should do is make sure that none of your data has been turned into an index. You can easily reset your index using df = df.reset_index(). In the snippet below you'll see that I've used your identical dataset as a dict with no index.

Edit: xaxis formatting

In the figure above, plotly interprets your xaxis as time values. If you'd like to prevent this, just include fig.update_xaxes(type='category') to get this:

Complete code:

import pandas as pd
import plotly.express as px

# df = pd.read_clipboard(sep='\\s+').reset_index()
# df.to_dict()
df = pd.DataFrame({'index': {0: 'Day',
                              1: 'Day',
                              2: 'Day',
                              3: 'Day',
                              4: 'Night',
                              5: 'Day',
                              6: 'Day',
                              7: 'Day',
                              8: 'Day',
                              9: 'Day',
                              10: 'Day',
                              11: 'Night'},
                             'Day-Shift': {0: '01-05',
                              1: '01-05',
                              2: '01-05',
                              3: '01-05',
                              4: '01-05',
                              5: '01-06',
                              6: '01-06',
                              7: '01-06',
                              8: '01-06',
                              9: '01-06',
                              10: '01-06',
                              11: '01-06'},
                             'State': {0: 'A',
                              1: 'STOPPED',
                              2: 'B',
                              3: 'C',
                              4: 'C',
                              5: 'STOPPED',
                              6: 'F',
                              7: 'A',
                              8: 'A',
                              9: 'STOPPED',
                              10: 'A',
                              11: 'A'},
                             'seconds': {0: 7439,
                              1: 0,
                              2: 10,
                              3: 35751,
                              4: 43200,
                              5: 7198,
                              6: 18,
                              7: 14,
                              8: 29301,
                              9: 6,
                              10: 6663,
                              11: 43200}})

import plotly.express as px
fig = px.bar(df, x="Day-Shift", y="seconds", color="State")
fig.show()