0

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)

enter image description here

0 Answers0