Unable to change font color on Plotly Sankey Charts

Using Streamlit
1

I wrote a function to return plotly fig on Streamlit and display it using st.plotly_chart but I am unable to change the color of labels in the Sankey chart. Same function works without any issues if I run it locally outside of Streamlit environment. This is specific to font color, I am able to change other attributes.

def make_sankey_chart(df, name):
nodes = 

for i in df.columns[:-1].to_list():
    nodes.extend(set(df[i]))

nodes_dict = {value: index for index, value in enumerate(nodes)}
node_labels = list(nodes_dict.keys())

n = len(df.columns) - 1
i = 0
source, target, value = [], [], []
while i < n-1:
    group_df = df.groupby(df.columns[i:i+2].to_list())[df.columns[-1]].sum().reset_index()
    source.extend(group_df.iloc[:,0].map(nodes_dict).to_list())
    target.extend(group_df.iloc[:,1].map(nodes_dict).to_list())
    value.extend(group_df.iloc[:,-1].to_list())
    i += 1    

fig = go.Figure(data=[go.Sankey(
    node=dict(
        pad=15,
        thickness=20,
        line=dict(color="black", width=0.5),
        label=node_labels
    ),
    link=dict(
        source=source,
        target=target,
        value=value
    )
)])

# Update layout
fig.update_layout(
    title=name,
    font=dict(color='blue', size=15)
)

return fig

Mandatory questions:

  1. Are you running your app locally or is it deployed?
    Local

  2. If your app is deployed:
    a. Is it deployed on Community Cloud or another hosting platform?
    b. Share the link to the public deployed app.
    NA

  3. Share the link to your app’s public GitHub repository (including a requirements file).
    NA

  4. Share the full text of the error message (not a screenshot).
    NA

  5. Share the Streamlit and Python versions.
    Streamlit version 1.31.0 and Python 3.9

2

Hi @karthick12195

There seems to be a relevant post (Label font color not changing in sankey charts - #3 by Dennis) but yet unresolved.

A possible workaround is to see if CSS customization could help in this situation, as suggested in one of the reply (Sankey text font{color} property not changing font color. · Issue #2845 · plotly/plotly.py · GitHub):


.node-label-text-path {
  fill: rgb(250, 250, 250) !important;
  text-shadow: none
}

Hope this helps!

1 Like
3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.