How to bottom middle align a legend in Vega Lite?

Question

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?

Cabana

Answer 1

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.

Maggoty

Note: some as of you may find, "react-vega" does not like the typings in Typescript. As such, I had to cast the code as follows layout: { bottom: { anchor: "middle" } } as LegendLayout as any, just in-case people wander here with Typescript/React in mind – Lanie

Answer 2

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
}

Sapphire