I’m trying to render the streamlit-altair chart from this example, so I implemented the following code:
<code>import altair as alt
import streamlit as st
from view.frontend.path import BasePath
chart_spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52},
]
},
"params": [
{
"name": "highlight",
"select": {"type": "point", "on": "pointerover"}
},
{"name": "select", "select": "point"}
],
"mark": {
"type": "bar",
"fill": "#4C78A8",
"stroke": "black",
"cursor": "pointer",
},
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"fillOpacity": {
"condition": {"param": "select", "value": 1},
"value": 0.3,
},
"strokeWidth": {
"condition": [
{
"param": "select",
"empty": False,
"value": 2,
},
{
"param": "highlight",
"empty": False,
"value": 1,
}
],
"value": 0
}
},
"config": {
"scale": {"bandPaddingInner": 0.2}
}
}
class Path(BasePath):
def __init__(self, payload: dict):
self._path_spec = payload
def render(self, container):
with container:
# Altair Chart
chart = alt.Chart().from_dict(chart_spec)
# Display chart in Streamlit
click_event = st.altair_chart(
chart, use_container_width=True, on_select="rerun"
)
# Catch the click and display result
if click_event is not None:
st.write(f"Clicked on: {click_event}")
</code>
<code>import altair as alt
import streamlit as st
from view.frontend.path import BasePath
chart_spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52},
]
},
"params": [
{
"name": "highlight",
"select": {"type": "point", "on": "pointerover"}
},
{"name": "select", "select": "point"}
],
"mark": {
"type": "bar",
"fill": "#4C78A8",
"stroke": "black",
"cursor": "pointer",
},
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"fillOpacity": {
"condition": {"param": "select", "value": 1},
"value": 0.3,
},
"strokeWidth": {
"condition": [
{
"param": "select",
"empty": False,
"value": 2,
},
{
"param": "highlight",
"empty": False,
"value": 1,
}
],
"value": 0
}
},
"config": {
"scale": {"bandPaddingInner": 0.2}
}
}
class Path(BasePath):
def __init__(self, payload: dict):
self._path_spec = payload
def render(self, container):
with container:
# Altair Chart
chart = alt.Chart().from_dict(chart_spec)
# Display chart in Streamlit
click_event = st.altair_chart(
chart, use_container_width=True, on_select="rerun"
)
# Catch the click and display result
if click_event is not None:
st.write(f"Clicked on: {click_event}")
</code>
import altair as alt
import streamlit as st
from view.frontend.path import BasePath
chart_spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52},
]
},
"params": [
{
"name": "highlight",
"select": {"type": "point", "on": "pointerover"}
},
{"name": "select", "select": "point"}
],
"mark": {
"type": "bar",
"fill": "#4C78A8",
"stroke": "black",
"cursor": "pointer",
},
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"fillOpacity": {
"condition": {"param": "select", "value": 1},
"value": 0.3,
},
"strokeWidth": {
"condition": [
{
"param": "select",
"empty": False,
"value": 2,
},
{
"param": "highlight",
"empty": False,
"value": 1,
}
],
"value": 0
}
},
"config": {
"scale": {"bandPaddingInner": 0.2}
}
}
class Path(BasePath):
def __init__(self, payload: dict):
self._path_spec = payload
def render(self, container):
with container:
# Altair Chart
chart = alt.Chart().from_dict(chart_spec)
# Display chart in Streamlit
click_event = st.altair_chart(
chart, use_container_width=True, on_select="rerun"
)
# Catch the click and display result
if click_event is not None:
st.write(f"Clicked on: {click_event}")
The problem is that I’m getting an empty chart in my app unlike the example page that is full with data.
What am I doing wrong?
1