Black and white colors are only seen when Plotly is downloaded as html file or a png or jpeg file

Using Streamlit
1

Summary

Black and white colors are only seen when Plotly is downloaded as html file or a png or jpeg file, not sure the reason behind the same, but same code is working when locally running a python file.

Steps to reproduce

Code snippet:

def PIE_CHART(Categorical_Data, column):
    """
    

    Parameters
    ----------
    Categorical_Data : TYPE
        DESCRIPTION.
    column : TYPE
        DESCRIPTION.

    Returns
    -------
    None.

    """
    category_list = list(Categorical_Data[column].unique())
    len_Dict = {}
    for category in category_list:
        len_Dict[category] = len(Categorical_Data[Categorical_Data[column] == category])
        
    LEN = pd.DataFrame(len_Dict, index =["values"])
    LEN = LEN.T.reset_index().rename(columns = {"index":"names"})
    
    PIE = px.pie(LEN, values='values', names='names', hole=.3)
    
    # save html file
    PIE.write_html('Volume Visualization/pie/example_graph.html')
   
    st.plotly_chart(PIE,theme = None, use_container_width= True)

image
image1695×850 28 KB

Expected behavior:

Plotly html file should appear with colors .

Actual behavior:

html file is getting downloaded without any colors only black color can be seen…

Please assist on this if there is any better approach or i am missing out on any thing please highlight.

2

This is strange indeed.

Without streamlit

write_html() works fine

With streamlit

write_html() works fine
    streamlit <= 1.15.1

write_html() has issues
    streamlit >= 1.15.2

All tests with plotly==5.13.0

plotly_chart works fine in all streamlit versions. Color is not black and white.

Sample code

import streamlit as st
import plotly.express as px

df = px.data.tips()
fig = px.pie(df, values='tip', names='day')

fig.write_html('plotly_sample-st.html')

st.plotly_chart(fig, theme='streamlit', use_container_width=True)
2 Likes
3

Hi everyone,

This is actually expected because we change the underlying colors to black and then replace them on the front end to colors that match our dark or light theme best.

In order to deal with this, you can use this something like this:

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)
3 Likes
4

@willhuang it worked thank you.

5

hey @willhuang, I like to know one more thing, is there a way to download streamlit page as html.

6

Hi @Dkdatascientist ,

I think there will be a print option that will allow you to download as a pdf. I’m not sure if you can download it as html. Why would u need the html?

7

I am creating a interactive dashboard, incase if it is downloaded as html the interactivity will be there so it can be used for any presentation.

8

I don’t think we offer that functionality as of right now. However, you can create an enhancement here:

1 Like
9

Hi @Dkdatascientist , I just got tagged and it looks like there is a hack to be able to download the plotly chart as html: Download Plotly plot as html

1 Like
10

hey @willhuang thanks for the reply, I saw that already in fact I am using same kind of method to download it as html. But I can only download the graph not the streamlit widgets.

11

Ah I see. I don’t think we have a way to do that right now! :frowning:

12

Hi guys.

I was struggling to find the solution until my colleague showed me where the solution is.
It was mentioned here, but not specified that it is actually the solution. It is only one line:

#import package
import plotly.io as pio

#And the following will do the trick:
pio.templates.default = “plotly”

1 Like
13

I was struggling with plotly for dash for similar problem. This solved it. Thanks.