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.
"legend": {
"title": "Signed NDA",
"orient": "bottom",
"titleAnchor": "middle"
}
This is how my legend looks right now. Anyone know how to do this?
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.
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
}
