Hello there 👋

Thanks for stopping by! We use cookies to help us understand how you interact with our website.

By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.

priority_high

Warning

You are reading the documentation for Streamlit version 1.20.0, but 1.41.0 is the latest version available.

Contents
st.vega_lite_chart
Chart selections
VegaLiteState
element.add_rows
Theming

st.vega_lite_chart

Display a chart using the Vega-Lite library.

Function signature[source]
st.vega_lite_chart(data=None, spec=None, use_container_width=False, theme="streamlit", **kwargs)
Parameters
data (pandas.DataFrame, pandas.Styler, pyarrow.Table, numpy.ndarray, Iterable, dict, or None)	Either the data to be plotted or a Vega-Lite spec containing the data (which more closely follows the Vega-Lite API). Pyarrow tables are not supported by Streamlit's legacy DataFrame serialization (i.e. with config.dataFrameSerialization = "legacy"). To use pyarrow tables, please enable pyarrow by changing the config setting, config.dataFrameSerialization = "arrow".
spec (dict or None)	The Vega-Lite spec for the chart. If the spec was already passed in the previous argument, this must be set to None. See https://vega.github.io/vega-lite/docs/ for more info.
use_container_width (bool)	If True, set the chart width to the column width. This takes precedence over Vega-Lite's native width value.
theme ("streamlit" or None)	The theme of the chart. Currently, we only support "streamlit" for the Streamlit defined design or None to fallback to the default behavior of the library.
**kwargs (any)	Same as spec, but as keywords.

Example

import streamlit as st
import pandas as pd
import numpy as np

chart_data = pd.DataFrame(
    np.random.randn(200, 3),
    columns=['a', 'b', 'c'])

st.vega_lite_chart(chart_data, {
    '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'},
    },
})

Built with Streamlit 🎈

Fullscreen open_in_new

^{(view standalone Streamlit app)}

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.

Chart selections

VegaLiteState

priority_high

Warning

This method did not exist in version 1.20.0 of Streamlit.

element.add_rows

Concatenate a dataframe to the bottom of the current one.

Function signature[source]
element.add_rows(self, data=None, **kwargs)
Parameters
data (pandas.DataFrame, pandas.Styler, pyarrow.Table, numpy.ndarray, pyspark.sql.DataFrame, snowflake.snowpark.dataframe.DataFrame, Iterable, dict, or None)	Table to concat. Optional. Pyarrow tables are not supported by Streamlit's legacy DataFrame serialization (i.e. with config.dataFrameSerialization = "legacy"). To use pyarrow tables, please enable pyarrow by changing the config setting, config.dataFrameSerialization = "arrow".
**kwargs (pandas.DataFrame, numpy.ndarray, Iterable, dict, or None)	The named dataset to concat. Optional. You can only pass in 1 dataset (including the one in the data parameter).

Example

import streamlit as st
import pandas as pd
import numpy as np

df1 = pd.DataFrame(
   np.random.randn(50, 20),
   columns=('col %d' % i for i in range(20)))

my_table = st.table(df1)

df2 = pd.DataFrame(
   np.random.randn(50, 20),
   columns=('col %d' % i for i in range(20)))

my_table.add_rows(df2)
# Now the table shown in the Streamlit app contains the data for
# df1 followed by the data for df2.

You can do the same thing with plots. For example, if you want to add more data to a line chart:

# Assuming df1 and df2 from the example above still exist...
my_chart = st.line_chart(df1)
my_chart.add_rows(df2)
# Now the chart shown in the Streamlit app contains the data for
# df1 followed by the data for df2.

And for plots whose datasets are named, you can pass the data with a keyword argument where the key is the name:

my_chart = st.vega_lite_chart({
    'mark': 'line',
    'encoding': {'x': 'a', 'y': 'b'},
    'datasets': {
      'some_fancy_name': df1,  # <-- named dataset
     },
    'data': {'name': 'some_fancy_name'},
}),
my_chart.add_rows(some_fancy_name=df2)  # <-- name used as keyword

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", use_container_width=True
    )
with tab2:
    st.vega_lite_chart(
        source, chart, theme=None, use_container_width=True
    )

Click the tabs in the interactive app below to see the charts with the Streamlit theme enabled and disabled.

Built with Streamlit 🎈

Fullscreen open_in_new

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!

Previous: st.pyplot Next: Input widgets

forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.