Search code examples
vegavega-lite

Formatting Facet/Multi-View Labels in vega-lite


Was wondering if there was a way to specify formatting for the Labels of the individual cells in a facet flow.

For example, for something like https://vega.github.io/vega-lite/examples/trellis_barley.html

Can I edit the label font sizes and anchors/baselines for the little labels that say "Grand Rapid Falls", "Duluth", etc.?

The closest thing I've been able to do is globally edit all the labels using a global config, but that also affects other labels like "Trebi", "wisconson No. 38", etc.

Thanks in advance!


Solution

  • Labels and titles for facets (including facet, row, and column encodings) are controlled by the "header" property.

    For example you could use something like this in the chart you linked to (view in editor)

      "encoding": {
        "facet": {
          ...
          "header": {
            "titleColor": "green",
            "titleFontSize": 40,
            "titleAnchor": "end",
            "labelColor": "red",
            "labelFontSize": 20,
            "labelAnchor": "start"
          }
        }
      }
    

    enter image description here

    More information on available label and title configurations can be found in the Vega-Lite Header documentation.