Bar Chart: Gradient Color in Data Bars

📊 Plotly Python
1

I am doing what I thought was a pretty simple visualization as I am pretty new to python and plotly. I am just taking some county covid data, calculating the rate per 100K population and bar graphing it. So far so easy.

What I wanted to end up with are individual bars for each county that go from green to yellow to red as they have a higher number. When the number reaches 100 it should be solid red (in the “red zone”) from 100 to however high it goes. It should look something like this (but with the colors reversed!)

The closest I have come is this:

I don’t like how the bars are one solid color, even if they do accurately reflect the actual number. :slight_smile:

Any help would be most appreciated.

I can post the code I have if need be…but it is pretty basic. :slight_smile:

2

Hi,

Fortunately, today I have same problem, and bump into this post.
I want to share something that I have been working on all day, to you and all community members that maybe had same problem.
I think it’s still relevant to reply this thread, even this post created 4 years ago.

As far as I know, until now, you can not create this kind of bar chart with just adding some attributes.
But, I have a solution that you need more work with the data.

Suppose I have this animal population dataframe,

df = pd.DataFrame({'animals':['giraffes', 'orangutans', 'monkeys'],
                   'pop': [20, 14, 23]})

Yes you can ceate a bar chart with plotly express, and set the color="pop" to show the colorbar.

fig = px.bar(new_df, x="animals", y="pop", color="pop")

and you will get this display.

image
image1858×828 24.1 KB

BUT, if you customize the data by using break the value of pop into smaller to bigger value you will get the gradient color in bar charts. You can do this using numpy.linspace, set the bigger retstep you will get smoother output.

df = pd.DataFrame({'animals':['giraffes', 'orangutans', 'monkeys'],
                   'pop': [20, 14, 23]})

new_df = pd.DataFrame({'animals':[],'pop': []})
for idx, row in df.iterrows():
    for pop in np.linspace(1,row["pop"],row["pop"]*4):
        new_df.loc[len(new_df)] = [row["animals"], pop]

And also you need to remove bar chart border line to make the gradation smoother and set the hovermode='x unified'.

fig = px.bar(new_df, x="animals", y="pop", color="pop")
fig.update_traces(marker_line_width=0)
fig.update_layout(hovermode="x unified")

Run and you will get this.

image
image1882×841 29.8 KB

Here the complete code.

import pandas as pd 
import plotly.express as px
import numpy as np

df = pd.DataFrame({'animals':['giraffes', 'orangutans', 'monkeys'],
                   'pop': [20, 14, 23]})

new_df = pd.DataFrame({'animals':[],'pop': []})
for idx, row in df.iterrows():
    for pop in np.linspace(1,row["pop"],row["pop"]*4):
        new_df.loc[len(new_df)] = [row["animals"], pop] 

print(new_df.head())
fig = px.bar(new_df, x="animals", y="pop", color="pop")
fig.update_traces(marker_line_width=0)
fig.update_layout(hovermode="x unified")
fig.show()

I hope you all can solve your problem.
Regards.

1 Like