Display a chart using the Vega-Lite library.
Function signature

st.vega_lite_chart(data=None, spec=None, use_container_width=False, **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.

**kwargs (any)

Same as spec, but as keywords.

Example

import pandas as pd
import numpy as np

df = pd.DataFrame(
    np.random.randn(200, 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'},
    },
})
(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.

Was this page helpful?

editSuggest edits
forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.