how can i split values of x axis in scroller in vegalite

Question

I want to create chart in Vega lite but facing issue while x axis label is overlapping. I want x axis label not overlap it must break if it going out of rect box size and just display below it and map that values in scroller too i.e.(concat1). editor link

i want like this label of x axis----

                 AEROPLANE
                 FLY
                 DAILY

i tried using list data-type but getting issues when using list of string values in scroller..

Answer 1

{
  "data": {
    "values": [
      {"Key_data": "a", "description": "AEROPLANE"},
      {"Key_data": "b", "description": "AEROPLANE FLY DAILY"},
      {"Key_data": "c", "description": "FLY DAILY"},
      {"Key_data": "d", "description": "HELICOPTER"},
      {"Key_data": "d", "description": "HIGH BLOOD PRESSURE"}
    ]
  },
  "columns": 1,
  "concat": [
    {
      "width": 700,
      "height": 350,
      "transform": [{"filter": {"param": "brush"}}],
      "layer": [
        {
          "mark": {"type": "rect"},
          "encoding": {
            "y": {"field": "Key_data", "type": "nominal"},
            "x": {
              "field": "description",
              "type": "nominal",
              "axis": {
                "orient": "top",
                "labelAngle": 0,
                "labelExpr": "split(datum.label,' ')",
                "labelPadding": 25
              }
            }
          }
        }
      ]
    },
    {
      "width": 700,
      "height": 30,
      "mark": "area",
      "encoding": {
        "x": {"field": "description", "type": "nominal", "axis": null},
        "y": {"field": "Key_data", "type": "nominal", "axis": null}
      },
      "params": [
        {
          "name": "brush",
          "value": [
            "AEROPLANE",
            "AEROPLANE FLY DAILY",
            "FLY DAILY",
            "HELICOPTER",
            "HIGH BLOOD PRESSURE"
          ],
          "select": {"type": "interval", "encodings": ["x"]}
        }
      ]
    }
  ]
}