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}}

vestland · Accepted Answer · 2021-02-10T10:54:24.013

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()

this shows data from 2001 Apr, May etc . How did that come from? in dataset, All the datapoints for Jan 5thand 6th noh? — johnson, Feb 10 '21 at 10:39
@domahc That's just plotly interpreting ***your*** data straight out of the box. But we can change that. First of all please [share your data like this](https://stackoverflow.com/questions/63163251/pandas-how-to-easily-share-a-sample-dataframe-using-df-to-dict/63163254#63163254) if you'd like to make changes to it. — vestland, Feb 10 '21 at 10:50
@domahc Or try `fig.update_xaxes(type='category')` and see if that's closer to your desired output. — vestland, Feb 10 '21 at 10:52
Your suggestion really helped. But in Graph x axis is different from the DF, Ex: After 01-05 Day,it shows 01-08 Night instead of 01-05 Night (Please check the updated question to see the graph). Do you have any idea to solve this? — johnson, Feb 11 '21 at 07:41
@domahc I see you've provided data in a more useful way and that's greati. If the link helped you in doing so, please consider leaving an upvote. If you found it useful, that is. — vestland, Feb 11 '21 at 07:44
@domahc What does the numbers in `Day-Shift` represent? Day and month? — vestland, Feb 11 '21 at 08:03
yes its a object column which includes Days and months. ex:Day 01-05 means Day shift(7AM to 7PM) of the January 5th — johnson, Feb 11 '21 at 08:07
@domahc It's the mixed columns of strings and dates that are causing the problems here. I there any way you could represent `Day` and `Night` with time of day instead? Like `07:00` and `19:00` for example? — vestland, Feb 11 '21 at 08:34
I represnt it as 07:00 and 19:00 . But didn't change the result. — johnson, Feb 12 '21 at 03:32

Stacked bar chart returns unexpected output (Python, plotly)

1 Answers1

Edit: xaxis formatting

Complete code:

Linked