quarto-dev / quarto-dev/quarto-cli

altair plots not showing in revealjs render?

Open
#10,903 13 comments 0 reactions 1 assignee View on GitHub

@cderv is already working on this.

Since Sep 27, 2024.

bug revealjs
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

I'm trying to write some plot-heavy slides with Quarto rendering to RevealJS, and I am using python and altair for plotting. I'm coding in VSCode.
I get the impression from the documentation that altair should work, and I believe I've also been able to do it before rendering to html.
But now, the plots are not showing on render. I found an error in the console log that is most likely related

Uncaught TypeError: vegaEmbed is not a function
    at displayChart (this_is_your_db.html:420:7)
    at Object.execCb (require.min.js:1:16727)
    at e.check (require.min.js:1:10499)
    at e.<anonymous> (require.min.js:1:12915)
    at require.min.js:1:1542
    at require.min.js:1:13376
    at each (require.min.js:1:1020)
    at e.emit (require.min.js:1:13344)
    at e.check (require.min.js:1:11058)
    at e.enable (require.min.js:1:13242)

This is the code in the html, within a script tag (truncated)

  <script type="text/javascript">
      var VEGA_DEBUG = (typeof VEGA_DEBUG == "undefined") ? {} : VEGA_DEBUG;
      (function(spec, embedOpt) {
          let outputDiv = document.currentScript.previousElementSibling;
          if (outputDiv.id !== "altair-viz-f5a273b5c427426c987b81d42dfa2ddc") {
              outputDiv = document.getElementById("altair-viz-f5a273b5c427426c987b81d42dfa2ddc");
          }
          const paths = {
              "vega": "https://cdn.jsdelivr.net/npm/vega@5?noext",
              "vega-lib": "https://cdn.jsdelivr.net/npm/vega-lib?noext",
              "vega-lite": "https://cdn.jsdelivr.net/npm/vega-lite@5.20.1?noext",
              "vega-embed": "https://cdn.jsdelivr.net/npm/vega-embed@6?noext",
          };

          function maybeLoadScript(lib, version) {
              var key = `${lib.replace("-", "")}_version`;
              return (VEGA_DEBUG[key] == version) ? Promise.resolve(paths[lib]) : new Promise(function(resolve, reject) {
                  var s = document.createElement('script');
                  document.getElementsByTagName("head")[0].appendChild(s);
                  s.async = true;
                  s.onload = () => {
                      VEGA_DEBUG[key] = version;
                      return resolve(paths[lib]);
                  }
                  ;
                  s.onerror = () => reject(`Error loading script: ${paths[lib]}`);
                  s.src = paths[lib];
              }
              );
          }

          function showError(err) {
              outputDiv.innerHTML = `<div class="error" style="color:red;">${err}</div>`;
              throw err;
          }

          function displayChart(vegaEmbed) {
              vegaEmbed(outputDiv, spec, embedOpt).catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));
          }

          if (typeof define === "function" && define.amd) {
              requirejs.config({
                  paths
              });
              require(["vega-embed"], displayChart, err => showError(`Error loading script: ${err.message}`));
          } else {
              maybeLoadScript("vega", "5").then( () => maybeLoadScript("vega-lite", "5.20.1")).then( () => maybeLoadScript("vega-embed", "6")).catch(showError).then( () => displayChart(vegaEmbed));
          }
      }
<!-- TRUNCATED --!>
</script>

Is this a RevealJS limitation?

My python versions are

  • Altair at 5.4.1

Quarto version is 1.5.57

I did find a non-ideal workaround, namely to render to png by calling altair.renderers.enable("png")

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.