visualizationvega-litevegavega-embedvega-lite-api

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


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..


Solution

  • enter image description here

    {
      "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"]}
            }
          ]
        }
      ]
    }