Search code examples
pythonplotlytreemapstreamlit

Colors don't match using plotly.express Treemap

I want to plot a dataframe with just a "category" and "color" columns and no extra values. The colors are given in words which I can convert to RGB. I want to plot the category and assign the correspond color to it, I use the following example code structure.

data = pd.DataFrame({
    "category": ["A", "B", "C", "D", "E"],
    "color": ["red", "green", "blue", "green", "red"]
})

# Define a dictionary to map color names to RGB values
color_map = {
    "red": "rgb(255,160,122)",
    "green": "rgb(124,252,0)",
    "blue": "rgb(240,248,255)"
}

# Map the color column to RGB values using the color_map dictionary
data["color"] = data["color"].map(color_map)

# Create the treemap and specify the color column
fig = px.treemap(data, 
                 path=["category"], 
                 color="color")
st.plotly_chart(fig, use_container_width=False)

But the output is not right, the code ignore the colors assigned.

Example output

Tried different colors and structures.

Solution

  • Found a solution using color_discrete_map, it goes like this:

    data = pd.DataFrame({
"category": ["A", "B", "C", "D", "E"],
"color": ["red", "green", "blue", "green", "red"]})

fig = px.treemap(df,  path=['category'], color='color', 
color_discrete_map={'red': 'red', 'blue': 'blue', 'green': 'green'})

st.plotly_chart(fig, use_container_width=False)