How can I get decimal values to appear vertically on a plotly express bar chart?

Question

Plotly bar chart showing decimal data horizontally rather than vertically, but integer data correctly, i.e. vertically.

For context, I am creating a bar chart (which will eventually form part of a plotly dash dashboard) for my fantasy football league. I want the bar chart to show 'week' on the x axis, with points scored on the y axis. The objective of the bar chart is to show the progression of a user's points over the course of a season.

I have loaded in my data into a dataframe like so:

             id  year  week  matchup  points  winner difference
1    2022-1-1-1  2022     1        1  122.60       1      27.18
2    2022-2-2-1  2022     2        2   66.76       1       2.62
3    2022-3-2-1  2022     3        2   91.56       1       0.04
4    2022-4-2-1  2022     4        2  128.28       1       5.20
5    2022-5-2-1  2022     5        2  147.68       1      38.62
6    2022-6-2-1  2022     6        2   83.06       1      19.32
7    2022-7-2-0  2022     7        2   92.72       0     -14.54
8    2022-8-2-0  2022     8        2   93.82       0     -40.52
9    2022-9-2-1  2022     9        2  120.10       1      26.20
10  2022-10-2-1  2022    10        2  140.20       1      66.60
11  2022-11-2-1  2022    11        2   99.08       1      10.28
12  2022-12-1-1  2022    12        1  149.26       1      73.30
13  2022-13-2-0  2022    13        2  105.32       0     -22.80
14  2022-14-2-0  2022    14        2  115.68       0      -1.70
15  2022-15-2-1  2022    15        2  112.16       1      10.66
16  2022-16-2-1  2022    16        2  109.88       1       2.68
17  2022-17-1-1  2022    17        1  110.42       1      31.10

Dataframe

Using this dataframe, I have written the following code to show the bar chart:

fig = px.bar(df, x='week', y='points', color='winner',color_discrete_map={'1':'#80c940','0':'crimson'})
fig.update_layout(showlegend=False)
fig.show()

the fig.show() function displays the graph as this:

Incorrect bar chart

However, I want the points value to display vertically along the x axis at each week. After doing some playing around, it seems to me that the issue that the 'points' value is a decimal; if I switch the datatype in the original SQL DB to integer from decimal, it displays as below:

Target bar chart

This is very much closer to what I want, although the colors and legend do not behave as the code should suggest they do. In this one, the 'points' value is an integer, rounded up or down so not accurate to the original intent of two decimal places.

How can I get the decimal point data to display like the second chart? Am I missing something very obvious?

Answer 1

The reason why the colors in the color bar and stacked graph are not as intended is because the values specified for the colors are numerical values. By making it a string, it is determined to be a categorical variable. Add text for annotations to the current graph settings item. Rotate the annotation text. The position of the annotation is already set inside by default from the beginning, but I set the default value to make it easier to understand the meaning.

import plotly.express as px

df['winner'] = df['winner'].astype(str)

fig = px.bar(df, x='week', y='points', color='winner', text='points', color_discrete_map={'1':'#80c940', '0':'crimson'})
fig.update_traces(textangle=90, textposition='inside')
fig.update_layout(showlegend=False)
fig.show()