vega-lite：是否可以只渲染没有参考图表的图例？

Question

I'm building a wireframe of an HTML page in which I have some vega-lite charts.

Is there a way to render only the legend of a chart? If yes, how to?

Answer 1

I don't know of a built-in way to display only the legend, but you can hack it by removing all positional encodings, setting the mark opacity to zero, and setting the view width/height to 0. For example, here is a way to generate just the legend from this Vega-Lite example :

{
  "data": {
    "url": "data/penguins.json"
  },
  "mark": {"type": "point", "opacity": 0},
  "encoding": {
    "color": {"field": "Species", "type": "nominal"},
    "shape": {"field": "Species", "type": "nominal"}
  },
  "config": {"view": {"width": 0, "height": 0}}
}