support positioning legend anchored in middle on top of chart

[mattijn]

Goal: I like to position my legend centred on top of a responsive chart.

I can use the following Vega-Lite specification Open the Chart in the 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"}
  },
  "height": 300,
  "width": "container",
  "config": {
    "legend": {
      "orient": "top",
      "titleAnchor": "middle",
      "layout": {"top": {"anchor": "middle"}}
    }
  }
}

That works:

But it validates with the following warnings:

[Warning] Validation: /config/legend/layout must have required property 'expr' of #/definitions/ExprRef/required
[Warning] Validation: must have required property 'facet' of #/required
[Warning] Validation: must have required property 'layer' of #/required
[Warning] Validation: must have required property 'repeat' of #/anyOf/0/required
[Warning] Validation: must have required property 'repeat' of #/anyOf/1/required
[Warning] Validation: must match a schema in anyOf of #/anyOf
[Warning] Validation: must have required property 'concat' of #/required
[Warning] Validation: must have required property 'vconcat' of #/required
[Warning] Validation: must have required property 'hconcat' of #/required
[Warning] Validation: must match a schema in anyOf of #/anyOf

Therefore I cannot use this approach in Vega-Altair. I think it is related to the Legend Layout properties that were introduced in Vega >5.0 (these: https://vega.github.io/vega/docs/config/#legend-layout-properties-50)

Somehow, I feel that this should have come up earlier in other issues? Also open for other alternatives to approach this!

[mattijn]

For now, you can add a custom parameter to work around this Open the Chart in the Vega Editor:

{
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "params": [{"name": "LEGENDX", "expr": "(width / 2) - 60"}],
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {"field": "Origin", "type": "nominal"}
  },
  "height": 300,
  "width": "container",
  "config": {
    "legend": {
      "orient": "none",
      "direction": "horizontal",
      "titleAnchor": "middle",
      "legendX": {"expr": "LEGENDX"},
      "legendY": -40
    },
    "padding": {"left": 5, "top": 40, "right": 5, "bottom": 5}
  }
}

I was not able to make the legendX anchor in the middle of the legend, by default the legendX defines the leftmost position of the legend. To approximate the centre alignment, I calculate legendX using an expression like "expr": "(width / 2) - 60", where 60 is an estimated value representing half the width of the legend labels.

---

And for reference in Vega-Altair:

import altair as alt

# load a simple dataset as a pandas DataFrame
from vega_datasets import data
cars = data.cars.url

LEGENDX = alt.param(expr='(width / 2) - 60')
alt.Chart(cars).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color='Origin:N',
).properties(width="container").configure(
    padding={'left':5, 'top':40,'right':5, 'bottom':5}
).configure_legend(
    orient='none',
    direction='horizontal',
    titleAnchor='middle',
    legendY=-40,
    legendX=LEGENDX,
).add_params(LEGENDX)