Altair Chart doesn't show

Summary

I am trying to display a custom data altair chart. I used the example in altair documentation. The browser shows the following errors:

Steps to reproduce

Code snippet:

Hereโ€™s my code:

import altair as alt
import streamlit as st

point = alt.Data(values=[{'x': 'A', 'y': 5},
                {'x': 'B', 'y': 3},
                {'x': 'C', 'y': 6},
                {'x': 'D', 'y': 7},
                {'x': 'E', 'y': 2}])

c = alt.Chart(point).mark_bar().encode(
    x='x:O',  # specify ordinal data
    y='y:Q',  # specify quantitative data
)

st.altair_chart(c)

Expected behavior:

The chart displays, as in Specifying Data in Altair โ€” Altair 4.1.0 documentation

Actual behavior:
The following error is displayed in the browser:

TypeError: Cannot use 'in' operator to search for 'url' in undefined
at Tl (http://localhost:8501/static/js/7.e4f7375b.chunk.js:2:860476)
at n (http://localhost:8501/static/js/7.e4f7375b.chunk.js:2:1013172)
at Sb (http://localhost:8501/static/js/7.e4f7375b.chunk.js:2:1015204)
at Bx (http://localhost:8501/static/js/7.e4f7375b.chunk.js:2:1051255)
at Object.Px [as compile] (http://localhost:8501/static/js/7.e4f7375b.chunk.js:2:1050544)
at Object.vega-lite (http://localhost:8501/static/js/7.e4f7375b.chunk.js:2:315189)
at http://localhost:8501/static/js/7.e4f7375b.chunk.js:2:318781
at u (http://localhost:8501/static/js/7.e4f7375b.chunk.js:2:253295)
at Object.next (http://localhost:8501/static/js/7.e4f7375b.chunk.js:2:252599)
at http://localhost:8501/static/js/7.e4f7375b.chunk.js:2:252324

Debug info

  • Streamlit version: 0.82.0
  • Python version: 3.8.10
  • Using Conda but I installed with pip.
  • OS version: Windows 10
  • Browser version: Microsoft Edge

One additional detail, Iโ€™m running the server from WSL and using the browser on Windows. The rest of the components display correctly.

1 Like