# Plotly bar graph doesn't display True and False colors properly

**URL:** <https://community.plotly.com/t/plotly-bar-graph-doesnt-display-true-and-false-colors-properly/78088>\
**Category:** 📊 Plotly Python\
**Tags:** question, bug-reporter\
**Created:** [August 27, 2023, 5:41pm UTC](https://community.plotly.com/t/plotly-bar-graph-doesnt-display-true-and-false-colors-properly/78088 "2023-08-27T17:41:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![PAIN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pain/32/25245_2.png) [@PAIN](https://community.plotly.com/u/PAIN)\
**Post date:** [August 27, 2023, 5:41pm UTC](https://community.plotly.com/t/plotly-bar-graph-doesnt-display-true-and-false-colors-properly/78088/1 "2023-08-27T17:41:40Z")

</div>

hi

I have data related to the number solves of different types of questions, The questions are either theory questions, assignment questions or neither.

I have two bar graphs with sliders that shows the number of solves per week. one shows if a question is a theory question or not, the other is _meant_ to show whether the question is an assignment question or not.

I am using this though python and I store the data in a pandas dataframe.

As you can guess, the assignment questions don’t work for some reason. I have the data extracted from an SQL table so that means the values are either 1 or 0 initially…

When I leave the assignment questions as 1’s or 0’s the graph looks like this:

 ![broken_bar_graph 0](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/d/3df3e7ba140bac4c3fd73463343e4faf4c02add7.png)

The issue comes when I decide to add the values “True” or “False” when adding the values to the pandas dataframe:

 ![broken_bar_graph 2](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/8/9/8992d779e7ad2c808dd5f1ab9b0d74e247a71a63.png)

What makes this REALLY annoying is that the theory question appears to be identical until the assignment question graph falls short…

This is when the values are 1 and 0 just like the other graph:

 ![broken_bar_graph 3](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/c/e/ce02cafd0cf7947975768468d2920297ee0d22e2.png)

But then this happens when I set 1 == true and 0 == false:

 ![broken_bar_graph 4](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/f/e/fe1bb8664d2b3bc4b399d901d1d70813f8b9e109.png)

The colors I’m looking for are in the theory questions graph but NOT in the assignment questions table for whatever reason.

To add to the confusion, these two tables extract the _same data_ from _the **same** _ dataframe!

THanks for the help:)

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [August 27, 2023, 6:37pm UTC](https://community.plotly.com/t/plotly-bar-graph-doesnt-display-true-and-false-colors-properly/78088/2 "2023-08-27T18:37:36Z")

</div>

Hi @PAIN Welcome to the community.

The main difference between these graphs is that if plotting 0/1 you are plotting numerical data, if plotting True/False you are plotting categorical data.

For the numerical data you have one trace and a colorbar. For the categorical data you have two traces with different colors.

Not sure what you are after, though. Is the main problem the colors?

---

<div class="post-metadata">

**Author:** ![PAIN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pain/32/25245_2.png) [@PAIN](https://community.plotly.com/u/PAIN)\
**Post date:** [August 28, 2023, 12:21am UTC](https://community.plotly.com/t/plotly-bar-graph-doesnt-display-true-and-false-colors-properly/78088/3 "2023-08-28T00:21:32Z")

</div>

The data not showing up correctly is the main problem, they just don’t show up properly for the assignment question.

My goal is for this graph to show up with all the valid data:  
[![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/8/9/8992d779e7ad2c808dd5f1ab9b0d74e247a71a63.png) ](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/8/9/8992d779e7ad2c808dd5f1ab9b0d74e247a71a63.png)

This above photo has the exact same point in the data as the below photo:  
[![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/d/3df3e7ba140bac4c3fd73463343e4faf4c02add7.png) ](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/d/3df3e7ba140bac4c3fd73463343e4faf4c02add7.png)

Even though both points should, and in fact, _do_ have the same data, I dont know why it doesn’t show up properly…

---

<div class="post-metadata">

**Author:** ![PAIN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pain/32/25245_2.png) [@PAIN](https://community.plotly.com/u/PAIN)\
**Post date:** [November 9, 2023, 1:25am UTC](https://community.plotly.com/t/plotly-bar-graph-doesnt-display-true-and-false-colors-properly/78088/4 "2023-11-09T01:25:06Z")

</div>

I’m back after some time doing studies.

Not sure what’s going on because when I remove the part of the line to specify the color wanted, the data shows perfectly fine. But the thing I want IS the colors.

The only time this doesn’t work is when I specify the column that I want to use for the colors. I have NO clue why this is. ☹

I’ve tried replacing the column in the pandas dataframe with “A” and “B” instead but the problem remains. What’s weird is this same change doesn’t do anything to my theory graph, which is based of the exact same dataframe…

WHAT?!?!

D:

I’m just going to avoid this graph altogether because this frustrating bug’s been here for literal MONTHS and I haven’t figured out what’s causing it. 😭

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [November 9, 2023, 6:52am UTC](https://community.plotly.com/t/plotly-bar-graph-doesnt-display-true-and-false-colors-properly/78088/5 "2023-11-09T06:52:50Z")

</div>

Hey @PAIN,

If you share data & code I’m pretty sure we get the graph how you would like it to be.

---

<div class="post-metadata">

**Author:** ![PAIN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pain/32/25245_2.png) [@PAIN](https://community.plotly.com/u/PAIN)\
**Post date:** [November 23, 2023, 3:10am UTC](https://community.plotly.com/t/plotly-bar-graph-doesnt-display-true-and-false-colors-properly/78088/6 "2023-11-23T03:10:20Z")

</div>

Here’s the code that’s being used for testing these graphs.

```python
weekly_solve_dictionary = {} # Format {week: {question_id: [count, question_name, assignment_question, theory_question], question_id: [count, question_name, assignment_question, theory_question], ...}, {question_id: ..., question_id: ..., ...}, ...}

# Extracting needed data
for pos, (question_id, question_name, completion_time, assignment_question, theory_question) in enumerate(cursor.execute("""
                                                                                   SELECT question_completions.question_id_fk, questions.question_name, question_completions.completion_time, questions.assignment_question, questions.theory_question
                                                                                   FROM questions, question_completions
                                                                                   WHERE
                                                                                   questions.question_id = question_completions.question_id_fk
                                                                                   """)):
    
    completion_week = pd.Timestamp(completion_time.replace(second = 0, microsecond = 0, minute = 0, hour = 0)).to_period('W').start_time # Getting the completion week of the questions.

    # Creating 'weekly_solve_dictionary'
    if completion_week in weekly_solve_dictionary:

        # Incrementing 'question_id' count for a given existing week.
        if question_id in weekly_solve_dictionary[completion_week]:
            weekly_solve_dictionary[completion_week][question_id][1] += 1 # If the question ID already exists in the week.
        else:
            weekly_solve_dictionary[completion_week][question_id] = [question_name, 1, assignment_question, theory_question] # Initialises the dictionary item if it doesn't already exist.

    else:
        weekly_solve_dictionary[completion_week] = {question_id: [question_name, 1, assignment_question, theory_question]}

connection.close()
# ===================== POPULATING GRAPH =====================

# Populate the lists of values with the data from 'weekly_solve_dictionary'
question_id_list = []
question_name_list = []
current_solve_list = []
completion_time_list = []
assignment_question_list = []
theory_question_list = []

for week, solves in weekly_solve_dictionary.items():
    for question_id, [question_name, weekly_solves, assignment_question, theory_question] in solves.items():
        # assignment_question = "A" if assignment_question == 1 else "B" # [NOPE] Testing to see if it's the true and the false thing that's somehow causing the issues.
        # assignment_question = True if assignment_question == 0 else False # [NOPE] Testing to see if swapping these will make the colours show up properly in the assignment question weekly graph.
        
        assignment_question = True if assignment_question == 1 else False
        theory_question = True if theory_question == 1 else False

        question_id_list.append(str(question_id))
        question_name_list.append(question_name)
        current_solve_list.append(weekly_solves) # This is the weekly solves for each individual question (with the question being identified from the question ID).
        completion_time_list.append(week)
        assignment_question_list.append(assignment_question)
        theory_question_list.append(theory_question)

# --------------------- Creating figures ---------------------

# Preparing the bar graph
bar_graph_data = {"Question ID": question_id_list, "Question Name": question_name_list, "Current Solves": current_solve_list, "Completion Time": completion_time_list, "Assignment Question": assignment_question_list, "Theory Question": theory_question_list}
bar_graph_dataFrame = pd.DataFrame(data=bar_graph_data)
print(bar_graph_dataFrame.to_markdown()) # This is where the table that I've shown lower is from. [1]

# [NOPE] Testing to see if making an individual bar graph dataframe just for the assignments would work...
# assignment_bar_graph_data = {"Question ID": question_id_list, "Question Name": question_name_list, "Current Solves": current_solve_list, "Completion Time": completion_time_list, "Assignment Question": assignment_question_list, "Theory Question": theory_question_list}
# assignment_bar_graph_dataFrame = pd.DataFrame(data=assignment_bar_graph_data)

# ----- Assignment weekly graph and testing for colour issues.

# [NOPE] Colours at all. ToT
assignmentGraph = px.bar(bar_graph_dataFrame, x='Question ID', y='Current Solves', hover_name = "Question Name", animation_frame="Completion Time", title = "Assignments", color = "Assignment Question",range_x=[-1,73], range_y=[0,350])

assignmentGraph.update_xaxes(categoryarray=full_question_ids)
assignmentGraph.update_layout(hovermode="x unified")
assignmentGraph["layout"].pop("updatemenus")

# ----- Theory graph.

theoryGraph = px.bar(bar_graph_dataFrame, x='Question ID', y='Current Solves', hover_name = "Question Name", animation_frame="Completion Time", title = "Theory", color = "Theory Question",range_x=[-1,73], range_y=[0,350])
theoryGraph.update_xaxes(categoryarray=full_question_ids)
theoryGraph.update_layout(hovermode="x unified")
theoryGraph["layout"].pop("updatemenus")

# ===================== INITIALISING AND RUNNING APP =====================

# Initialize the app
app = Dash( __name__ )

# App layout
app.layout = html.Div([
    html.Div(children='My First App with Data and a Graph'),
    dcc.Graph(figure = assignmentGraph),
    dcc.Graph(figure = theoryGraph)
    
])

# Run the app
if __name__ == ' __main__':
    app.run(debug=True)

```

Here’s a bit of the dataframe I’m using, the dataframe is at the comment where ‘[1]’ is at:

| | Question ID | Question Name | Current Solves | Completion Time | Assignment Question | Theory Question |
| --- | --- | --- | --- | --- | --- | --- |
| 0 | 1 | L1Q1 | 3 | 2023-02-20 00:00:00 | False | False |
| 1 | 2 | L1Q2 | 1 | 2023-02-20 00:00:00 | False | True |
| 2 | 3 | L1Q3 | 1 | 2023-02-20 00:00:00 | False | True |
| 3 | 4 | L1Q4 | 2 | 2023-02-20 00:00:00 | False | True |
| 4 | 5 | L2Q1 | 1 | 2023-02-20 00:00:00 | False | False |
| 5 | 6 | L2Q2 | 1 | 2023-02-20 00:00:00 | False | False |
| 6 | 7 | L2Q3 | 1 | 2023-02-20 00:00:00 | False | False |
| 7 | 8 | L2Q4 | 1 | 2023-02-20 00:00:00 | False | False |
| 8 | 1 | L1Q1 | 287 | 2023-02-27 00:00:00 | False | False |
| 9 | 2 | L1Q2 | 195 | 2023-02-27 00:00:00 | False | True |
| 10 | 3 | L1Q3 | 250 | 2023-02-27 00:00:00 | False | True |
| 11 | 4 | L1Q4 | 260 | 2023-02-27 00:00:00 | False | True |
| 12 | 5 | L2Q1 | 105 | 2023-02-27 00:00:00 | False | False |
| 13 | 6 | L2Q2 | 71 | 2023-02-27 00:00:00 | False | False |
| 14 | 7 | L2Q3 | 69 | 2023-02-27 00:00:00 | False | False |
| … | | | | | | |
| 763 | 76 | Q1P1 | 102 | 2023-05-15 00:00:00 | True | False |
| 764 | 77 | Q1P2 | 107 | 2023-05-15 00:00:00 | True | False |
| 765 | 78 | Q1P3 | 104 | 2023-05-15 00:00:00 | True | False |
| 766 | 79 | Q1P4 | 88 | 2023-05-15 00:00:00 | True | False |
| 767 | 80 | Q2P1 | 87 | 2023-05-15 00:00:00 | True | False |
| 768 | 81 | Q2P2 | 87 | 2023-05-15 00:00:00 | True | False |
| 769 | 82 | Q2P3 | 93 | 2023-05-15 00:00:00 | True | False |
| 770 | 83 | Q2P4 | 88 | 2023-05-15 00:00:00 | True | False |
| 771 | 84 | Q3P1 | 93 | 2023-05-15 00:00:00 | True | False |
| 772 | 85 | Q3P2 | 94 | 2023-05-15 00:00:00 | True | False |
| 773 | 86 | Q3P3 | 94 | 2023-05-15 00:00:00 | True | False |
| 774 | 87 | Q3P4 | 98 | 2023-05-15 00:00:00 | True | False |
| 775 | 88 | Q4P1 | 99 | 2023-05-15 00:00:00 | True | False |
| 776 | 89 | Q4P2 | 94 | 2023-05-15 00:00:00 | True | False |

I’ve rename the question names as I cannot share that. 🙂

Thank for all the help! 😃