How dissappear Y axis label on condition in VegaLite

Question

I am trying to create a group bar chart with text label. I am trying to disappear y axis label when value is greater then 100 means (100%)because when valuuw is excatly 100 then label(text on top of bar) get out of chart that look different for this i fix domainMax but i create another problem showing label which never be greater then 100.

i want text(over bar) come inside and label greater then 100 cannot be display. Editor link

Required Output

Answer 1

Try this:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "A", "group": "x", "percentage": 10},
      {"category": "A", "group": "y", "percentage": 85},
      {"category": "A", "group": "z", "percentage": 40},
      {"category": "B", "group": "x", "percentage": 50},
      {"category": "B", "group": "y", "percentage": 60},
      {"category": "B", "group": "z", "percentage": 90},
      {"category": "C", "group": "x", "percentage": 80},
      {"category": "C", "group": "y", "percentage": 100},
      {"category": "C", "group": "z", "percentage": 0}
    ]
  },
  "params": [{"name": "paintbrush", "value": "datum['percentage']"}],
  "encoding": {
    "x": {"field": "category"},
    "y": {
      "field": "percentage",
      "type": "quantitative",
      "axis": {
        "labelExpr": "datum.value+'%'",
        "grid": false,
        "values": {"expr": "[0,10,20,30,40,50,60,70,80,90,100]"}
      },
      "scale": {"nice": false}
    },
    "xOffset": {"field": "group"}
  },
  "layer": [
    {"mark": "bar", "encoding": {"color": {"field": "group"}}},
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle",
        "dy": 10,
        "color": {"expr": "datum.percentage >= 100 ? 'transparent' :'white'"}
      },
      "encoding": {"text": {"field": "percentage", "type": "quantitative"}}
    },
    {
      "mark": "point",
      "encoding": {
        "y": {"field": "maxPC", "type": "quantitative"},
        "color": {"value": "transparent"}
      }
    }
  ]
}

Here is another alternative:

In the spec below I first find the max of the percentage column, then add 9% of this to push the scale of Y axis higher. Some other formatting tweaks also.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "A", "group": "x", "percentage": 10},
      {"category": "A", "group": "y", "percentage": 85},
      {"category": "A", "group": "z", "percentage": 40},
      {"category": "B", "group": "x", "percentage": 50},
      {"category": "B", "group": "y", "percentage": 60},
      {"category": "B", "group": "z", "percentage": 90},
      {"category": "C", "group": "x", "percentage": 80},
      {"category": "C", "group": "y", "percentage": 100},
      {"category": "C", "group": "z", "percentage": 0}
    ]
  },
  "transform": [
    {
      "joinaggregate": [{"op": "max", "field": "percentage", "as": "maxPCTemp"}]
    },
    {"calculate": "datum.maxPCTemp * 1.09", "as": "maxPC"}
  ],
  "params": [{"name": "paintbrush", "value": "datum['percentage']"}],
  "encoding": {
    "x": {"field": "category"},
    "y": {
      "field": "percentage",
      "type": "quantitative",
      "axis": {
        "labelExpr": "datum.value+'%'",
        "grid": false,
        "values": {"expr": "[0,10,20,30,40,50,60,70,80,90,100]"}
      },
      "scale": {"nice": false}
    },
    "xOffset": {"field": "group"}
  },
  "layer": [
    {"mark": "bar", "encoding": {"color": {"field": "group"}}},
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle",
        "dy": -7,
        "opacity": {"expr": "datum.value== 0 ? 0 :1"}
      },
      "encoding": {"text": {"field": "percentage", "type": "quantitative"}}
    },
    {
      "mark": "point",
      "encoding": {
        "y": {
          "field": "maxPC",
          "type": "quantitative",
          "axis": {
            "labelExpr": "datum.value+'%'",
            "values": {"expr": "[0,10,20,30,40,50,60,70,80,90,100]"}
          }
        },
        "color": {"value": "transparent"}
      }
    }
  ]
}