CODEWITHSUNDEEP
powerbipowerbi-desktopvega-litevegadeneb
Eleena
Eleena

Reputation: 43

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

Upvotes: 2

Views: 365

Answers (2)

APB Reports
APB Reports

Reputation: 2451

Davide Bacci's solution is the most elegant. However, I just wanted to show an alternative way I do this in case it was of interest for anyone. I concat the values I need in a calculate transform then split them in the labelExpr.

{
  "$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}
    ]
  },
  "transform": [
    {
      "calculate": "format(datum.LineCount,'.0f') + '|' + datum.Category",
      "as": "full_Category"
    }
  ],
  "mark": "bar",
  "encoding": {
    "y": {
      "sort": "-x",
      "title": "Category",
      "field": "full_Category",
      "type": "ordinal",
      "axis": {
        "labelExpr": "split(split(datum.value, '|')[1],'')",
        "labelOffset": {"expr": "split(datum.label, '|')[0] !== '1' ? -5 : 0"},
        "labelColor": {
          "expr": "split(datum.label, '|')[0] !== '1' ? 'red':'black'"
        },
        "labelPadding": 5
      }
    },
    "x": {"field": "Measure", "type": "quantitative", "title": "Measure"}
  }
}

Upvotes: 0

davidebacci
davidebacci

Reputation: 30304

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

Upvotes: 1

Related Questions