How can I add a legend to this Vega visualization

user_90416 0
Viewed 1547

I am trying to figure out how to add a legend to the example vega visualization here. Any example of how to do this would be appreciated. Preferably it would be interactive and highlight or show data on the visualization, but even just a simple legend would be a big improvement.

Thank you

vega visualization
1 Answers

For a simple starting point using legends in this Vega Donut Chart Demo:

Here's the same example Vega sandbox with my legends code from below added in after the marks section.

Here is the legend code I used: 

  "legends": [
    {
      "fill": "color",
      "title": "This is the Title",
      "orient": "top-left",
      "encode": {
        "symbols": {"enter": {"fillOpacity": {"value": 0.5}}},
        "labels": {"update": {"text": {"field": "value"}}}
      }
    }
  ]

This should serve as a useful example starting point for you. Other properties of legends can be found here.

user_47469840
Related