Vega plot not displaying within a holoviz panel in jupyter notebook

I find the holoviz panel a very interesting solution to building data visualisation dashboards. Unfortunately, I have some issues getting a vega plot of a node-link diagram to work within a panel in a jupyter notebook.

For a minimal script showing the issue, see at the bottom of this question.

My findings:

  • The vega import works nicely when used outside of a panel: the Vega specification copy/pasted from is visualised as it should be using Vega(spec).
  • When using pn.pane.Vega(spec) I get an empty space. Running the visualisation externally using pn.pane.Vega(spec).show() and looking at the source code, I see that the div is empty.

Any help with getting this working much appreciated…

#!/usr/bin/env python
import panel as pn
from bokeh.plotting import figure, output_notebook, show
from vega import VegaLite, Vega

spec = {
  "$schema": "",
  "width": 400,
  "height": 200,

  "data": [
      "name": "table",
      "values": [
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43}

  "scales": [
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "width"
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "range": "height"

  "marks": [
      "type": "rect",
      "from": {"data":"table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value": 0}
        "update": {
          "fill": {"value": "steelblue"}

Vega(spec) # => shows barchart => OK

pn.Column(pn.panel("## Vega test"),
          pn.panel("_end of test_"))
# => shows "Vega test", then empty space, the "end of test"

pn.Column(pn.panel("## Vega test"),
          pn.panel("_end of test_"))
# => shows "Vega test", then empty space, the "end of test"

Thank you,

Looks like Panel isn’t serializing the data correctly in this case. Would you mind filing an issue on Panel?

Done. Hopefully this is not too difficult to fix and we can go on with our work here :slight_smile:


I tested the vega spec on:
The vega code in the code above is valid code, so the problem seems to be with panel.

Thanks for fixing this so quickly!
Is there a simple way of using the fix if I installed panel using pip install?


I just installed the latest panel version from github as follows:

pip install git+

And tested as follows:

The fix works.

Issue was:

Thanks @philippjfr @SandervandenOord . This does get me closer, but there seems to still be one (or two?) problems.
[1] See image: using the example spec I provided above, I can draw using Vega(spec) as before, and indeed a pn.panel(spec).show() opens a new browser tab and shows the barchart. However, wanting to show the panel in the notebook itself still does not work yet: pn.panel(spec).
[2] When running this on a network spec (from the vega example showing a force-directed network of the Miserables characters), I get a different error in line 21 of the same source file. The error:

~/anaconda3/envs/i0u19a_jupyter/lib/python3.7/site-packages/panel/pane/ in ds_as_cds(dataset)
     19     if len(dataset) == 0:
     20         return {}
---> 21     data = {k: [] for k, v in dataset[0].items()}
     22     for item in dataset:
     23         for k, v in item.items():

AttributeError: 'str' object has no attribute 'items'

See the second image for a screenshot of the complete error message. The command used was pn.pane.Vega(spec), the error what is shown above, and the output was Vega(dict).

Image 1:

Image 2:

Thanks I’ll look into it!

Hey @philippjfr. Do you want me to put up an issue on github about this?

That would be great!

Done. I split it up into two different issues: 885 and 886.

Looking forward to getting this solved. (I’m giving a presentation this Friday, and hope to be able to show an interactive version of the static plots that I already have. If not - I know how it is working on open source software - so be it :slight_smile: )

Fixed in

I believe your notebook issues come down to not loading the extension correctly, instead of doing:


You should just run:


Hey guys,

Is it possible that a new commit broke the earlier fix for using Vega in a panel? Installing panel using pip install git+, I again get an empty div using the same spec as the one above.

  • Vega(spec) => works
  • pn.pane.Vega(spec) => nothing
  • pn.pane.Vega(spec).show => nothing (empty canvas element)

This is the source code when running show() for the barchart spec above:

Seems to be a different issue entirely, the console reports:

WARN Infinite extent for field "amount": [Infinity, -Infinity]

which is pretty odd. I’ll look into it.

Fixed in

1 Like

The amount was indeed complaining…

It now works for the scatterplot, but not yet for a force-directed graph :slight_smile: The issue still exists for e.g. the network specification at

Given what your last fix looks like, it might be something similar…


I’m just confused why this worked at all before.

The force directed example you posted works fine for me.

Strange… Still no luck for me.

The full python code is here:

  • Installed panel with pip install git+
  • Installed vega with pip install vega

What does work, is to load the data from an external URL. So instead of using values in the data section, I use:

  "data": [
      "name": "node-data",
      "url": "",
      "format": {"type": "json", "property": "nodes"}
      "name": "link-data",
      "url": "",
      "format": {"type": "json", "property": "links"}

But of course the whole point for me using vega within jupyter notebook is so that I can build the nodes and links from within the notebook :-/

In any case already very much appreciated all the effort you’re putting in. Hopefully me having these issues can help improve the library :slight_smile: