Search code examples
vega-lite

Column facet: how to align header title to the bottom?

I would like to align to the bottom all the header titles of my facet columns.

This is my code

And I get the below result, the titles are not aligned downwards, each one has a different distance from the graphic bottom.

image

How to align these titles to the bottom?

Thank you

Solution

  • Looks like a bug. Can you raise it on GitHub? Here is a workaround.

    enter image description here

    {
  "data": {"name": "data-eb2eb4918524c908955f7797d7245a00"},
  "facet": {
    "column": {
      "field": "f",
      "header": {"labelOrient": "bottom", "labelFontSize": 20, "title": ""}
    }
  },
  "spec": {
    "layer": [
      {
        "mark": {"type": "arc", "outerRadius": 100},
        "encoding": {
          "color": {
            "field": "k",
            "legend": {"title": ""},
            "sort": {"field": "n"},
            "type": "nominal"
          },
          "theta": {"field": "v", "stack": true, "type": "quantitative"}
        }
      },
      {
        "mark": {"type": "text", "fill": "black", "radius": 115},
        "encoding": {
          "color": {
            "field": "k",
            "legend": {"title": ""},
            "sort": {"field": "n"},
            "type": "nominal"
          },
          "text": {"field": "v", "format": ",.1f", "type": "quantitative"},
          "theta": {"field": "v", "stack": true, "type": "quantitative"}
        }
      }
    ]
  },
  "resolve": {"scale": {"theta": "independent"}},
  "$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json",
  "datasets": {
    "data-eb2eb4918524c908955f7797d7245a00": [
      {"n": 1, "f": "Non Forest", "k": "N", "v": 32.20114689016321},
      {"n": 2, "f": "Non Forest", "k": "E", "v": 22.30554330245552},
      {"n": 3, "f": "Non Forest", "k": "S", "v": 14.350830760182326},
      {"n": 4, "f": "Non Forest", "k": "W", "v": 31.14247904719894},
      {"n": 5, "f": "Forest", "k": "N", "v": 24.525745257452574},
      {"n": 6, "f": "Forest", "k": "E", "v": 20.460704607046072},
      {"n": 7, "f": "Forest", "k": "S", "v": 21.00271002710027},
      {"n": 8, "f": "Forest", "k": "W", "v": 34.010840108401084},
      {"n": 9, "f": "Unclassified", "k": "N", "v": 29.437706725468576},
      {"n": 10, "f": "Unclassified", "k": "E", "v": 32.08379272326351},
      {"n": 11, "f": "Unclassified", "k": "S", "v": 16.427783902976845},
      {"n": 12, "f": "Unclassified", "k": "W", "v": 22.05071664829107}
    ]
  }
}