CODEWITHSUNDEEP
vega-lite
Arvind Ramesh
Arvind Ramesh

Reputation: 31

How to bottom middle align a legend in Vega Lite?

In Vega Lite, I am trying to align my legend to the middle of this chart. I need something like an anchor parameter for the legend, but I can only find titleAnchor.

Chart with Legend

"legend": {
        "title": "Signed NDA",
        "orient": "bottom",
        "titleAnchor": "middle"
      }

This is how my legend looks right now. Anyone know how to do this?

Upvotes: 3

Views: 3182

Answers (2)

ehudk
ehudk

Reputation: 595

This is actually possible within Vega 5.0, legend layout property, by setting the anchor property to "middle", in the legend's layout config.

Providing layout doesn't seem to be directly supported by Vega-Lite yet, but it is possible to propagate a layout definition from Vega-Lite to Vega.
Following Jake's answer, in Vega-Lite editor:

{
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {"field": "Origin", "type": "nominal"}
  },
  "height": 300,
  "width": 400,
  
  "config": {
    "legend": {"orient": "bottom", "layout": {"bottom": {"anchor": "middle"}}}
  }
}

Specifying the config at the end basically allows you to customize how the orient "bottom" should look.

enter image description here

Upvotes: 8

jakevdp
jakevdp

Reputation: 86463

There is no option to anchor the legend in the bottom center, but you can set orient: "none" and use the legendX and legendY properties to locate it exactly where you would like. For example (vega editor):

{
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {
      "field": "Origin",
      "type": "nominal",
      "legend": {
        "orient": "none",
        "direction": "horizontal",
        "legendX": 120,
        "legendY": 340,
        "title": null
      }
    }
  },
  "height": 300,
  "width": 400
}

enter image description here

Upvotes: 2

Related Questions