Altair support - Layer charts dont appear to work in streamlit

Summary

Altair appears to work just fine inside streamlit, but I have problems getting layer charts to work. Note - Concat (vert/horizontal) of altair charts works fine, but doing something like

(chart1 + chart2).resolve_scale(y='independent') 

results in everything going blank and no chart canvas displayed

Steps to reproduce

What are the steps we should take to reproduce the bug:

1. Build 2 altair charts inside the same streamlit script, ideally with a shared x-axis like time/date (so it makes sense to crate a compound chart)
2. try to layer them using (chart1 + chart2).resolve_scale(y='independent')

Expected behavior:

The layer chart should display with different y-axes

Actual behavior:

Nothing displays - the chart fades as if to reload but everything goes blank

Is this a regression?

this works elsewhere, e.g. in jupyterlab

Debug info

• Streamlit version: 0.60.0
• Python version: Python 3.7.4
• Using Conda
• OS version: Mac OS X Catalina
• Browser version: Brave, Version 1.10.97 Chromium: 83.0.4103.116

Additional information

If needed, add any other context about the problem here. For example, did this bug come from https://discuss.streamlit.io or another site? Link the original source here!

[andfanilo]

Hi @niviksha, thanks for the issue. It looks like Streamlit magics does not detect the output of resolve_scale as an Altair object, but you can display the Altair layer through st.altair_chart as a workaround.

Code sample :

import altair as alt
from altair.expr import datum
from vega_datasets import data
import streamlit as st

stocks = data.stocks.url

base = alt.Chart(stocks).encode(
    x='date:T',
    y='price:Q',
    color='symbol:N'
).transform_filter(
    datum.symbol == 'GOOG'
)

(base.mark_line() + base.mark_point()).resolve_scale(y='independent') # does not work
st.write((base.mark_line() + base.mark_point()).resolve_scale(y='independent')) # works
st.altair_chart((base.mark_line() + base.mark_point()).resolve_scale(y='independent')) # works

[tjbergst]

Are there any updates on this?

I am also facing the same concat-within-concat issue producing blank charts. This is the javascript console error:

7.37f183da.chunk.js:2 ERROR TypeError: Cannot read property '0' of undefined
    at Object.eval (eval at l (7.37f183da.chunk.js:2), <anonymous>:3:107)
    at M._update (7.37f183da.chunk.js:2)
    at M.evaluate (7.37f183da.chunk.js:2)
    at M.run (7.37f183da.chunk.js:2)
    at Be.<anonymous> (7.37f183da.chunk.js:2)
    at c (5.53ccda26.chunk.js:2)
    at Generator._invoke (5.53ccda26.chunk.js:2)
    at Generator.next (5.53ccda26.chunk.js:2)
    at n (7.37f183da.chunk.js:2)
    at s (7.37f183da.chunk.js:2)