Streamlit overrides colours of plotly chart

[skyhound]

Summary

Ok, so the issue is the following: since version 1.15.2, Streamlit seems to override colours of any created plotly figure, which breaks its rendering when its not done via Streamlit itself (for example, fig.to_html())

Consider the following code:

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


x_axis = list(range(4))*2
x_axis.sort()
data = np.array([["a", "b"]*4, x_axis, [2, 4, 3, 5, 7, 5, 8, 6]]).transpose()
df = pd.DataFrame(columns=["cat_value", "x", "y"], data=data)
fig = px.bar(df, x="x", y="y", color="cat_value", barmode="group")
for go_data in fig.data:
    print(go_data["name"])
    print(go_data["marker"]["color"])
st.plotly_chart(fig)

On Streamlit 1.15.0 this code would generate the following output in logs:

a
#636efa
b
#EF553B

and produce nice figure with blue and red bars. But if I update Streamlit to 1.15.2 or higher (pandas and plotly versions remain the same), figure will be the same, but text output will be the following:

a
#000001
b
#000002

which essentially means that if generated figure is to be rendered in any way other than st.plotly_chart, all markers will be black. It seems that Streamlit overrides color of created figure and then swaps it for something else while rendering.

My question is: there any way to create a figure with proper colours while running a script from Streamlit? For example, I need to render it via to_html().

If there is no such way now, maybe it should be fixed?

[Goyo]

Look at the theme argument to plotly_chart.

st.plotly_chart - Streamlit Docs

[skyhound]

The thing is, by the time plotly_chart is called, figure is already created and therefore colours are already wrong, so this wont help

[Goyo]

Oh, I see. I read your post too quickly. I would call that a bug. There is probably a way to work around this but I don’t know what it could be.

[willhuang]

@skyhound

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


x_axis = list(range(4))*2
x_axis.sort()
data = np.array([["a", "b"]*4, x_axis, [2, 4, 3, 5, 7, 5, 8, 6]]).transpose()
df = pd.DataFrame(columns=["cat_value", "x", "y"], data=data)
fig = px.bar(df, x="x", y="y", color="cat_value", barmode="group")
for go_data in fig.data:
    print(go_data["name"])
    print(go_data["marker"]["color"])
st.plotly_chart(fig)

Hi @skyhound , sorry for just noticing this. We are indeed currently changing the underlying theme colors and then swapping them out. This is so that we can change based on light or dark themes in order to make the user experience much better!

However, if you wish to change the colors to the plotly colors instead of the black,

you can put this in your script:

import plotly.io as pio
pio.templates.default = "plotly"

If you need to run to_html(), I think you can run the above and then do as such and well just replace whatever you need with to_html():

import plotly.io as pio
import streamlit as st
import plotly.express as px

pio.templates.default = "plotly"

df = px.data.tips()
fig = px.scatter(
    df,
    x="total_bill",
    y="tip",
    color="day",
    color_discrete_sequence=[
        "#0068c9",
        "#83c9ff",
        "#ff2b2b",
        "#ffabab",
        "#29b09d",
        "#7defa1",
        "#ff8700",
        "#ffd16a",
        "#6d3fc0",
        "#d5dae5",
    ],
    title="streamlit colors",
)
st.plotly_chart(fig)

[skyhound]

Thank you very much! That works as a solution, at least if one is okay with default plotly colours.