A new Streamlit theme for Altair and Plotly charts

Our charts just got a new look!

December 19 2022

Streamlit + Altair + Plotly 🎈

At Streamlit, we're constantly inspired by other open-source projects.

We're especially inspired by Altair and Plotly and their contributions to the data visualization community. They're two of the most popular Python libraries for creating interactive charts in Python—and in Streamlit. We continuously work to support them in our library, as Streamlit's success is due in no small part to their powerful and flexible charting capabilities.

Introducing a beautiful new Streamlit theme 🧑‍🎨

Today, we're excited to announce the release of a new default theme for Altair and Plotly charts in Streamlit apps!

The theme uses Streamlit's signature colors and layout adjustments that will make your data visualizations more engaging and easier to understand. Plus, your charts will better integrate with the rest of your app's design.

Check out our release demos for Altair at altair.streamlit.app and plotly.streamlit.app for more examples.

Psst…night owls and dark mode fans—we've got you covered, too! 🌚

How can you try it? 👩‍💻

You don't need to do anything!

The new theme is available from Streamlit 1.16 through the theme="streamlit" keyword argument in st.altair_chart, st.vega_lite_chart, and st.plotly_chart. It's activated by default, so there is nothing you need to do to enjoy it. ✨

Here's a minimal example of a contour plot with Plotly:

import numpy as np
import plotly.graph_objects as go
import streamlit as st
z = np.random.random_sample((3, 2))
fig = go.Figure(data=go.Contour(z=z))
st.plotly_chart(
    fig, 
    theme="streamlit",  # ✨ Optional, this is already set by default!
)

You can customize it

If you're an experienced Altair or Plotly user and like customizations, don't worry. Although we now enable the Streamlit theme by default, you can overwrite it with custom colors or fonts. For example, if you want a chart line to be green instead of the default red, you can do it!

Check out some customization examples in Altair and Plotly.

You can disable it

If you want, you can continue using the default theme. Just type theme=None instead of theme="streamlit" in your chart commands:

st.altair_theme(..., theme=None)

To learn more about our charts, visit our Altair, Plotly, and Vega-Lite chart docs!

Wrapping up

We're confident that your users (and you!) will love this new default theme. Go ahead and give it a try. And check out the other features released in 1.16.0.

Happy Streamlit-ing! 🎈


This is a companion discussion topic for the original entry at https://blog.streamlit.io/a-new-streamlit-theme-for-altair-and-plotly/
1 Like

Sigh… I really appreciate pretty colors, but getting a selection from a chart (preferably the Altair one) back into Streamlit is so much more important than looks. Not even to mention the ability to select rows from a table…

1 Like

Haven’t tried yet, but since it’s from domoritz, I’d consider it pretty much the standard component for this, you could try domoritz/streamlit-vega-lite: A Streamlit component to render interactive Vega, Vega-Lite, and Altair visualizations and access the selected data from Python (github.com)

Until it is officially supported later this year since it’s in the roadmap for July 2023: Streamlit roadmap

Have a nice day,
Fanilo

1 Like