st.vega_lite_chart
Display a chart using the Vega-Lite library.
Vega-Lite is a high-level grammar for defining interactive graphics.
Examples
import pandas as pd
import streamlit as st
from numpy.random import default_rng as rng
df = pd.DataFrame(rng(0).standard_normal((60, 3)), columns=["a", "b", "c"])
st.vega_lite_chart(
df,
{
"mark": {"type": "circle", "tooltip": True},
"encoding": {
"x": {"field": "a", "type": "quantitative"},
"y": {"field": "b", "type": "quantitative"},
"size": {"field": "c", "type": "quantitative"},
"color": {"field": "c", "type": "quantitative"},
},
},
alt="Scatter plot of a vs b sized by c",
)
Examples of Vega-Lite usage without Streamlit can be found at https://vega.github.io/vega-lite/examples/. Most of those can be easily translated to the syntax shown above.
VegaLiteState
The schema for the Vega-Lite event state.
To use this type in an annotation, import it from streamlit.typing.
The event state is stored in a read-only dictionary-like object that supports both key and attribute notation. Event states cannot be programmatically changed or set through Session State.
Only selection events are supported at this time.
Examples
The following two examples have equivalent definitions. Each one has a point and interval selection parameter include in the chart definition. The point selection parameter is named "point_selection". The interval or box selection parameter is named "interval_selection".
Example 1: Chart selections with ``st.altair_chart``
import altair as alt
import pandas as pd
import streamlit as st
from numpy.random import default_rng as rng
df = pd.DataFrame(rng(0).standard_normal((20, 3)), columns=["a", "b", "c"])
point_selector = alt.selection_point("point_selection")
interval_selector = alt.selection_interval("interval_selection")
chart = (
alt.Chart(df)
.mark_circle()
.encode(
x="a",
y="b",
size="c",
color="c",
tooltip=["a", "b", "c"],
fillOpacity=alt.condition(point_selector, alt.value(1), alt.value(0.3)),
)
.add_params(point_selector, interval_selector)
)
event = st.altair_chart(chart, key="alt_chart", on_select="rerun")
event
Example 2: Chart selections with ``st.vega_lite_chart``
import pandas as pd
import streamlit as st
from numpy.random import default_rng as rng
df = pd.DataFrame(rng(0).standard_normal((20, 3)), columns=["a", "b", "c"])
spec = {
"mark": {"type": "circle", "tooltip": True},
"params": [
{"name": "interval_selection", "select": "interval"},
{"name": "point_selection", "select": "point"},
],
"encoding": {
"x": {"field": "a", "type": "quantitative"},
"y": {"field": "b", "type": "quantitative"},
"size": {"field": "c", "type": "quantitative"},
"color": {"field": "c", "type": "quantitative"},
"fillOpacity": {
"condition": {"param": "point_selection", "value": 1},
"value": 0.3,
},
},
}
event = st.vega_lite_chart(df, spec, key="vega_chart", on_select="rerun")
event
Try selecting points in this interactive example. When you click a point, the selection will appear under the attribute, "point_selection", which is the name given to the point selection parameter. Similarly, when you make an interval selection, it will appear under the attribute "interval_selection". You can give your selection parameters other names if desired.
If you hold Shift while selecting points, existing point selections will be preserved. Interval selections are not preserved when making additional selections.
Theming
Vega-Lite charts are displayed using the Streamlit theme by default. This theme is sleek, user-friendly, and incorporates Streamlit's color palette. The added benefit is that your charts better integrate with the rest of your app's design.
The Streamlit theme is available from Streamlit 1.16.0 through the theme="streamlit" keyword argument. To disable it, and use Vega-Lite's native theme, use theme=None instead.
Let's look at an example of charts with the Streamlit theme and the native Vega-Lite theme:
import streamlit as st
from vega_datasets import data
source = data.cars()
chart = {
"mark": "point",
"encoding": {
"x": {
"field": "Horsepower",
"type": "quantitative",
},
"y": {
"field": "Miles_per_Gallon",
"type": "quantitative",
},
"color": {"field": "Origin", "type": "nominal"},
"shape": {"field": "Origin", "type": "nominal"},
},
}
tab1, tab2 = st.tabs(["Streamlit theme (default)", "Vega-Lite native theme"])
with tab1:
# Use the Streamlit theme.
# This is the default. So you can also omit the theme argument.
st.vega_lite_chart(
source, chart, theme="streamlit", width="stretch"
)
with tab2:
st.vega_lite_chart(
source, chart, theme=None, width="stretch"
)
Click the tabs in the interactive app below to see the charts with the Streamlit theme enabled and disabled.
If you're wondering if your own customizations will still be taken into account, don't worry! You can still make changes to your chart configurations. In other words, 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!
Tip
Want a new st.vega_lite_chart feature or found a bug? Browse open issues and react with a 👍 on the initial post of the ones that matter to you. Your votes help us prioritize what to work on next.
Still have questions?
Our forums are full of helpful information and Streamlit experts.