I want to hide text labels when the stack bar width is under 10% of the total bar width, indicated by the ‘x’ in this mock up.

I can hide these based on their absolute value, however I don’t want to do that because when the chart is filtered, then their relative value becomes large enough to want to show the labels.

There are many records with the same category and y-value, so they have to be aggregated.

Here’s my attempt:

{
  "data": {"name": "dataset"},
  "encoding": {
    "y": {
      "title": null,
      "field": "yval",
      "sort": "descending"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {"field": "category"}
      }
    },
    {
      "transform": [
        {
          "aggregate": [
            {
              "op": "sum",
              "field": "xval",
              "as": "xtotal"
            }
          ],
          "groupby": ["yval"]
        }
      ],
      "mark": {"type": "text"},
      "encoding": {
        "x": {
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum",
          "stack": "zero",
          "bandPosition": 0.5
        },
        "text": {
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {"value": "black"},
        "opacity": {
          "condition": {
            "test": "datum.sum_xval/datum.xtotal > 0.1",
            "value": 1
          },
          "value": 0
        }
      }
    }
  ]
}