Spaces:
Sleeping
Sleeping
File size: 2,215 Bytes
746d2f1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
---
title: st.vega_lite_chart
slug: /develop/api-reference/charts/st.vega_lite_chart
description: st.vega_lite_chart displays a chart using the Vega-Lite library.
---
<Autofunction function="streamlit.vega_lite_chart" />
<Autofunction function="DeltaGenerator.add_rows" />
### 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:
```python
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.
<Cloud src="https://doc-vega-lite-theme.streamlit.app/?embed=true" height="500" />
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!
|