Search code examples
powerbipowerbi-desktopvega-litevegadeneb

Is there a way to align multi-line y axis values in vega lite?

I'm starting out in vega lite (specifically deneb Power BI) and trying to create a bar chart with multi line values in the y axis, but I can't get them to align properly (it only aligns the top line with the tick)

I can't find any properties in 'axis' that work in the documentation (labelBaseline re-aligns all values, not specifics), so I've tried to hack it with the following logic, but can't figure out the proper syntax to get it to work:

Apply a condition within the labelOffset that references a separate column 'LineCount' (with the logic if LineCount = 2, then adjust by -5, otherwise adjust by 0).

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"Category": "A H", "Measure": 28, "LineCount": 2},
      {"Category": "B", "Measure": 55, "LineCount": 1},
      {"Category": "C", "Measure": 43, "LineCount": 1},
      {"Category": "D", "Measure": 91, "LineCount": 1},
      {"Category": "E", "Measure": 81, "LineCount": 1}
    ]
  },
  "mark": "bar",
  "encoding": {
    "y": {"field": "Category", "type": "ordinal",
    
    "axis":{
      "labelExpr":"split(datum.label, '')",
      "labelOffset": {
      "expr": "datum.LineCount == 2 ? -5 : 0" 
    }}},
    "x": {"field": "Measure", "type": "quantitative"
}
    
  }
}

[Outcome] enter image description here

I will note I have gotten it to work by updating the expr to ("datum.label == 'A H' ? -5 : 0" ), but I don't want to have to specify each individual axis value as the actual data has 20 multiline values.

[Example with datum.label method]

enter image description here

Would anyone have any ideas on how to get the above logic to work? Or if there's some easy method I might have completely missed. Appreciate any ideas

Solution

  • Does this do what you want?

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"Category": "A H", "Measure": 28, "LineCount": 2},
      {"Category": "B", "Measure": 55, "LineCount": 1},
      {"Category": "C", "Measure": 43, "LineCount": 1},
      {"Category": "D", "Measure": 91, "LineCount": 1},
      {"Category": "E", "Measure": 81, "LineCount": 1}
    ]
  },
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "Category",
      "type": "ordinal",
      "axis": {
        "labelExpr": "split(datum.label, '')",
        "labelOffset": {"expr": "length(split(datum.label, ''))!=1 ? -5 : 0"}
      }
    },
    "x": {"field": "Measure", "type": "quantitative"}
  }
}