So I have this Altair chart and I want to fill the area between 'GOOG' & 'AAPL'. I have tried using the .mark_area but can't quite figure out how to do it. The idea is to have this in a streamlit app at the end.
I feel like it is along the same lines as the question below but because of the nature of the data it doesn't quite work.
fill between 2 lines with altair
import streamlit as st
import altair as alt
from vega_datasets import data
def get_chart(data):
hover = alt.selection_point(
fields=['symbol'],
nearest=True,
on='mouseover',
empty='none'
)
lines = (
alt.Chart(data)
.mark_line()
.encode(
x='date',
y='price',
color='symbol')
.properties(
width=800,
height=300)
)
points = lines.transform_filter(hover).mark_circle(size=65)
tooltips = (
alt.Chart(data)
.mark_rule()
.encode(
x='date',
y='price',
opacity=alt.condition(hover, alt.value(0.0), alt.value(0.0)),
tooltip=[
alt.Tooltip('symbol', title='company'),
alt.Tooltip('price', title='price')
]
)
.add_params(hover)
)
return (lines + points + tooltips)
source = data.stocks()
chart = get_chart(source)
st.altair_chart(chart)