Altair: mark_boxplot (Uncaught (in promise) Error: Invalid mark type "boxplot")

[PeterVerheijen]

Hey there,

Currently trying to render a simple boxplot chart using the following piece of code which I plucked from one of the examples:

population = alt.load_dataset('population')
chart = alt.Chart(population).mark_boxplot(extent='min-max').encode(
    x='age:O',
    y='people:Q'
)

Unfortunately the graph won't load and using Chrome inspector gives the following error:

Uncaught (in promise) Error: Invalid mark type "boxplot"
  | Qr | @ | vega-lite@2:1
-- | -- | -- | --
  | so | @ | vega-lite@2:1
  | oo | @ | vega-lite@2:1
  | e.compile | @ | vega-lite@2:1
  | vega-lite | @ | vega-embed@3:1
  | (anonymous) | @ | vega-embed@3:1
  | (anonymous) | @ | vega-embed@3:1
  | U | @ | vega-embed@3:1
  | Ee | @ | vega-embed@3:1
  | Ae | @ | vega-embed@3:1
  | (anonymous) | @ | whisker:3605

I've tried to check if it had anything to do with versioning, currently the requirements.txt file contains the following versions:

altair==3.1.0
vega_datasets==0.4

I'm not sure if it's a bug or a mistake on my end (apologies in advance if that's the case).

Thank you and kind regards,

Peter

[jakevdp]

Your frontend is using an older version of Vega-Lite (boxplot marks were added in version 3.0). How are you rendering your charts?

[jakevdp]

(duplicate of #1578?)

[PeterVerheijen]

(duplicate of #1578?)

Looks like the same problem indeed.

[PeterVerheijen]

Your frontend is using an older version of Vega-Lite (boxplot marks were added in version 3.0). How are you rendering your charts?

I'm rendering it with vegaEmbed:

  {% if spec %} 
  var spec = {{ spec | safe }};  /* JSON dump of your chart's spec */
  var opt = {"renderer": "canvas", "actions": false};  /* Options for the embedding */
  vegaEmbed("#vis", spec, opt);
  {% endif %}

Using the following cdn's:

<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>

Switching to
solved the problem.

---

I tried installing vega-lite with pip (adding it to my requirements file), however it can't find the version 3.x.x and older that way.

Thank you, Jake!

[jakevdp]

I tried installing vega-lite with pip (adding it to my requirements file)

Vega-Lite is a Javascript library, not a python library, so it can't be installed with pip. It is loaded by your browser in the <script> tags, or with a requirejs require statement.

[jakevdp]

I'm glad to see that using the correct Vega-Lite version solved the issue!

[jakevdp]

For future reference, if you do chart.save('filename.html') the file output will contain the recommended Javascript library versions for the particular version of Altair that you are using.

[jakevdp]

I noticed the docs on this were out of date; I updated them in fe845a3ec7751addefcf90346ee7b5b7c7b906d1