Plotly_chart theme="streamlit" documentation

Using Streamlit
1

Is there a documentation for exact parameters used in Streamlit theme for Plotly charts (e.g., title/axis title font, font size, position, chart color scheme, margins, etc.)?

I saw the documentation page with examples (https://plotly.streamlit.app/), but I couldn’t find the code for how the Streamlit theme itself is configured.

One specific property I can’t figure out is the space between plot border and axes. How is y=0 treated in the screenshot below? It’s not taking the blue color from the gridcolor argument, nor the thicker black from the showline argument.

See screenshot and code below - the exact same code was used to produce both charts except for theme=“streamlit” and theme=None (and titles accordingly).

Thank you for your help!

Justinas

streamlit theme example
streamlit theme example3244×1077 96 KB 

    fig = go.Figure()
    fig.add_trace(
        go.Scatter(
            x=[0, 1, 2, 3, 4],
            y=[0, 2, 4, 2, 0],
            line=dict(color="green", width=4),
        )
    )
    fig.update_layout(
        title="streamlit themed chart",
        yaxis_title="y-value",
        xaxis_title="x-value",
        paper_bgcolor="rgba(213,213, 213,50)",
        plot_bgcolor="rgba(255,220,220,50)",
        yaxis_range=[0, 6],
        xaxis_range=[0, 6],
    )

    fig.update_xaxes(showline=True, linewidth=2, linecolor="black")

    fig.update_yaxes(
        showline=True,
        linewidth=2,
        linecolor="black",
        gridwidth=1,
        gridcolor="blue",
    )
    st.plotly_chart(fig, theme="streamlit", use_container_width=True)
2

Any update on this? I am hoping to find the source code for the plotly theme too so I know which font/family is being used as well as the bg colors.

3

Hi @justgri @jptfs

I found this on Streamlit’s GitHub repo for the Streamlit plotly theme that you may get some inspiration from

4

I did find this as well just a few minutes ago, but I am left with questions on how the colors are actually populated. For example, if I create this theme in my IDE and run outside of streamlit - the plots are all black (due to the global CATEGORY__ and SEQUENTIAL__ variables being set of the form #000001 and so on).

Line 27 says # We pass in temporary colors to the frontend and the frontend will replace
I guess I don’t understand what is happening here.

5

Hi @jptfs and @justgri , so what happens is Streamlit creates its own plotly theme on the python side and then we pass that theme to the plotly javascript code.

In order to find the actual values that streamlit is using, you can check it here:

where the actual values in CustomTheme.tsx get mapped to this file:

If there are some things that the streamlit theme is not respecting, that is a bug and would love a report here:

1 Like
6

Those are the references I was looking for - thanks!

7

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