Hello,
I’m attempting to create a multi-line tooltip chart using Altair in a Streamlit app. I’ve based my code on the example provided in the Altair gallery
However, when I run my Streamlit app, the vertical line that appears in the Altair example is not rendered. Here’s the code for my Streamlit app:
import streamlit as st
import pandas as pd
import numpy as np
import altair as alt
st.title('My First Streamlit App')
st.subheader('A simple chart:')
np.random.seed(42)
columns = ["A", "B", "C"]
source = pd.DataFrame(
np.cumsum(np.random.randn(100, 3), 0).round(2),
columns=columns, index=pd.RangeIndex(100, name="x"),
)
source = source.reset_index().melt("x", var_name="category", value_name="y")
# Create a selection that chooses the nearest point & selects based on x-value
nearest = alt.selection_point(nearest=True, on="pointerover",
fields=["x"], empty=False)
# The basic line
line = alt.Chart(source).mark_line(interpolate="basis").encode(
x="x:Q",
y="y:Q",
color="category:N"
)
# Draw points on the line, and highlight based on selection
points = line.mark_point().encode(
opacity=alt.condition(nearest, alt.value(1), alt.value(0))
)
# Draw a rule at the location of the selection
rules = alt.Chart(source).transform_pivot(
"category",
value="y",
groupby=["x"]
).mark_rule(color="red").encode(
x="x:Q",
opacity=alt.condition(nearest, alt.value(0.3), alt.value(0)),
tooltip=[alt.Tooltip(c, type="quantitative") for c in columns],
).add_params(nearest)
# Put the five layers into a chart and bind the data
chart = alt.layer(
line, points, rules
).properties(
width=600, height=300
)
st.write("Here's a simple chart using Altair:")
st.altair_chart(chart)
I’m running the app locally with Streamlit version 1.33.0 and Altair version 5.3.0.
Is there something I’m missing that’s causing the vertical line not to render? Any help would be greatly appreciated.
Thank you.