Although Google has a lot to say when searching for the title I could not find anything that helped me...

When running the following code in a Jupyter notebook

from vega import VegaLite

VegaLite(
{
  "$schema": ".json",
  "description": "A simple bar chart with embedded data.",
  "width": 360,
  "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "tooltip": {"field": "b", "type": "quantitative"}
  }
})

I get the error message

JavaScript output is disabled in JupyterLab

Although Google has a lot to say when searching for the title I could not find anything that helped me...

When running the following code in a Jupyter notebook

from vega import VegaLite

VegaLite(
{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A simple bar chart with embedded data.",
  "width": 360,
  "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "tooltip": {"field": "b", "type": "quantitative"}
  }
})

I get the error message

JavaScript output is disabled in JupyterLab

• javascript
• jupyter-lab

• Did you try altair-viz.github.io/user_guide/… ? – krassowski Commented Jan 30, 2019 at 17:05
• The question is: can you use Vega without Altair? – lanes Commented Jan 31, 2019 at 12:03
• I switched to JupyterLab 0.35.3. Here I can open Vega files and they are rendered. For rendering inside a notebook I use Altair 2.3.0. – lanes Commented Feb 1, 2019 at 15:15
• Altair dropped support for Vega in version 5, it now only supports vega-lite, so if you want to use a feature that is only supported in vega that's nolonger an option. – alwaysmpe Commented Oct 19, 2023 at 0:54

3 Answers 3

You must change to Help Launch Classic Notebook

I was having the same problem.

According to this github issue, creating widgets this way, "was only ever intended to be a quick way to experiment with widgets before creating a real widget package, so is a bit hacky."

It only worked in Jupyter Notebook has since been deprecated in Jupyter Lab.

They recommend starting off with the official cookie cutter template and creating a proper widget. Tutorial here: https://jupyterlab.readthedocs.io/en/3.2.x/extension/extension_tutorial.html#

JupyterLab now has builtin support for Vega. A raw schema can be displayed

schema = {
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A simple bar chart with embedded data.",
  "width": 360,
   "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "tooltip": {"field": "b", "type": "quantitative"}
  }
}
display({'application/vnd.vega.v5+json': schema}, raw=True)

Or alternatively this can be wrapped in an object as follows. This way if the object is the last statement of a cell it's automatically rendered.

from dataclasses import dataclass
@dataclass
class Vega:
    schema: dict

    def _repr_mimebundle_(self, *args, **kwargs):
        return {'application/vnd.vega.v5+json': self.schema}

plot = Vega(schema)
plot

The documentation includes a list of supported mime types