Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

5.12.1 breaks interactive legend

See original GitHub issue

The following produces a chart without a working interactive legend:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5.12.1"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@4.8.1"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
      var spec = {"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "data": {"url": "https://vega.github.io/vega-datasets/data/unemployment-across-industries.json"}, "mark": "area", "encoding": {"color": {"type": "nominal", "field": "series", "scale": {"scheme": "category20b"}}, "opacity": {"condition": {"value": 1, "selection": "selector002"}, "value": 0.2}, "x": {"type": "temporal", "axis": {"domain": false, "format": "%Y", "tickSize": 0}, "field": "date", "timeUnit": "yearmonth"}, "y": {"type": "quantitative", "aggregate": "sum", "axis": null, "field": "count", "stack": "center"}}, "selection": {"selector002": {"type": "multi", "fields": ["series"], "bind": "legend"}}, "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json"};
      var embedOpt = {"mode": "vega-lite"};
      vegaEmbed("#vis", spec, embedOpt)
  </script>
</body>
</html>

Changing 5.12.1 to 5.12.0 fixes the issue.

Issue Analytics

State:
Created 3 years ago
Comments:13 (8 by maintainers)

Top GitHub Comments

2reactions

jheercommented, May 22, 2020

Update: v5.12.2 has been released with a fix for this issue.

2reactions

jakevdpcommented, May 22, 2020

Add a snippet like this to the top of your notebook to specify library versions you want to use:

import altair as alt
from altair.utils.display import HTMLRenderer
alt.renderers.register('my_renderer', HTMLRenderer(
    mode="vega-lite",
    template="universal",
    vega_version='5.10.0',
    vegaembed_version=alt.VEGAEMBED_VERSION,
    vegalite_version=alt.VEGALITE_VERSION,
))
alt.renderers.enable('my_renderer')

Top Results From Across the Web

Interactive Legend Instant App: Introduction Panel...

Hello all, I have been working on a map in the instant app, interactive legend for a few months, and it is supposed...

15 Common Problems with rmarkdown (and some solutions)

If you want to practice on fixing broken rmarkdown documents, check out some pathologically broken ... recreate the error in an interactive session:....

Chapter 3 Basics of Handling Spatial Data in R - Bookdown

Increase legend.width (argument of tm_layout) to make the legend wider and therefore the labels larger. The legend is too narrow to place all...

QUANTAX 1.9 Quick Ref. Manuall - Dartmouth

5.12.1 Using the Method Editor . ... This is accomplished by optimized automatic or interactive spectrum ... in the rare case of a...

Change Log for Plesk Obsidian

WordPress Toolkit 5.12.1. 2 August 2022. WordPress Toolkit no longer breaks down with InternalServerError in case of internal database inconsistency.