powerbi-desktopvega-litevega

Enable multi line / wrap of single x axis label text in vega-lite


I have questing regarding Vega-lite in Power BI. I want to wrap the x-axis label after each ; but nothing worked for me. I was trying:


"labelExpr": "replace(datum.label, /;\\s*/g, '\\n')"

Before it looks like:

enter image description here

With the lablExpr line: it removes the ; but doesn't wrap. Like so:

enter image description here

I also deleted the offset function bc I heard it makes wraping hard, but nothing changed.

The code i used for the second picture:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "encoding": {
    "x": {
      "field": "Bezeichner",
      "type": "nominal",
      "axis": {
        "title": "",
        "labelAngle": 0,
        "labelAlign": "center",
        "labelBaseline": "middle",
        "labelLineHeight": 12,
        "labelFontSize": 15, 
        "labelPadding": 10,
        "labelLimit": 500,
        "labelExpr": "replace(datum.label, /;\\s*/g, '\\n')"
      }
    }
  },
  "layer": [
    {
      "mark": {"type": "bar", "opacity": 1},
      "encoding": {
        "y": {
          "field": "LCC",
          "type": "quantitative",
          "axis": {"title": "", 
          "titleColor": "#118DFF",
           "orient": "right",
          "labelFontSize": 15,
          "labelFont": "Roboto", 
          "labelPadding": 10,
          "grid": true}
        },
        "xOffset": {"value": 57
      },
        "color": {"value": "#118DFF"},
        "tooltip": [
          {"field": "Bezeichner", "type": "nominal", "title": "Bezeichner"},
          {"field": "LCC", "type": "quantitative", "title": "LCC"},
          {"field": "LCA", "type": "quantitative", "title": "LCA"}
        ]
      }
    },
    {
      "mark": {"type": "bar", "opacity":1},
      "encoding": {
        "y": {
          "field": "LCA",
          "type": "quantitative",
          "axis": {
            "title": "",
            "orient": "left",
            "titleColor": "#AAE574",
            "grid": false,
            "labelFontSize": 15,
            "labelFont": "Roboto",
            "labelPadding": 10
          }
        },
        "xOffset": {"value": 8},
        "color": {"value": "#AAE574"},
        "tooltip": [
          {"field": "Bezeichner", "type": "nominal", "title": "Bezeichner"},
          {"field": "LCC", "type": "quantitative", "title": "LCC"},
          {"field": "LCA", "type": "quantitative", "title": "LCA"}
        ]
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}},
  "config": {
    "bar": {"size": 50},
    "scale": {
      "bandPaddingInner": 0.845,
      "bandPaddingOuter": 0.5
    
    }
  }
}



Solution

  • You should be able to use split() with ';' as the delimiter:

    {
      ...
      "encoding": {
        "x": {
          ...
          "axis": {
            ...
            "labelExpr": "split(datum.label, ';')"
          }
        }
      },
      ...
    }
    

    I don't have your data, but I did a quick mockup with just the categories on the x channel, which hopefully satisfies your requirements:

    simple column chart with x-axis labels, split by delimiter