How to filter text mark with small values that are overlapping in stack bar chart on vega lite

Question

Some of the text overlap with one another because the value is very small, so there isn't enough space for the text mark. I have tried using transform with filter, but the position of the text mark will be incorrect. What could I do, so that I can filter out the value that is less than 5% while maintaining the position of the remaining text mark?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "value": 0.5026,
        "serie": "bts",
        "category": "facebook",
        "color": "#2ccce4"
      },
      {
        "value": 0.357,
        "serie": "jungkook",
        "category": "facebook",
        "color": "#f47373"
      },
      {
        "value": 0.0967,
        "serie": "jimin",
        "category": "facebook",
        "color": "#37d67a"
      },
      {
        "value": 0.0437,
        "serie": "butter",
        "category": "facebook",
        "color": "#dce775"
      },
      {
        "value": 0.7923,
        "serie": "bts",
        "category": "news",
        "color": "#2ccce4"
      },
      {
        "value": 0,
        "serie": "jungkook",
        "category": "news",
        "color": "#f47373"
      },
      {
        "value": 0.0231,
        "serie": "jimin",
        "category": "news",
        "color": "#37d67a"
      },
      {
        "value": 0.1846,
        "serie": "butter",
        "category": "news",
        "color": "#dce775"
      },
      {
        "value": 0.6569,
        "serie": "bts",
        "category": "twitter",
        "color": "#2ccce4"
      },
      {
        "value": 0.0511,
        "serie": "jungkook",
        "category": "twitter",
        "color": "#f47373"
      },
      {
        "value": 0.0949,
        "serie": "jimin",
        "category": "twitter",
        "color": "#37d67a"
      },
      {
        "value": 0.1971,
        "serie": "butter",
        "category": "twitter",
        "color": "#dce775"
      },
      {
        "value": 1,
        "serie": "bts",
        "category": "blog",
        "color": "#2ccce4"
      },
      {
        "value": 0,
        "serie": "jungkook",
        "category": "blog",
        "color": "#f47373"
      },
      {
        "value": 0,
        "serie": "jimin",
        "category": "blog",
        "color": "#37d67a"
      },
      {
        "value": 0,
        "serie": "butter",
        "category": "blog",
        "color": "#dce775"
      },
      {
        "value": 1,
        "serie": "bts",
        "category": "instagram",
        "color": "#2ccce4"
      },
      {
        "value": 0,
        "serie": "jungkook",
        "category": "instagram",
        "color": "#f47373"
      },
      {
        "value": 0,
        "serie": "jimin",
        "category": "instagram",
        "color": "#37d67a"
      },
      {
        "value": 0,
        "serie": "butter",
        "category": "instagram",
        "color": "#dce775"
      }
    ]
  },
  "title": {},
  "encoding": {
    "y": {
      "field": "category",
      "axis": {
        "title": null
      }
    },
    "x": {
      "aggregate": "sum",
      "stack": "normalize",
      "field": "value",
      "axis": {
        "title": null,
        "grid": false
      }
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar"
      },
      "encoding": {
        "color": {
          "field": "serie",
          "scale": {
            "range": ["#2ccce4", "#dce775", "#37d67a", "#f47373"]
          },
          "legend": null
        },
        "tooltip": [
          {
            "field": "category",
            "type": "nominal"
          },
          {
            "field": "value",
            "type": "quantitative",
            "aggregate": "sum",
            "format": ".2%"
          },
          {
            "field": "serie",
            "type": "nominal"
          }
        ]
      }
    },
    {
      "mark": {
        "type": "text",
        "dx": -3,
        "align": "right",
        "color": "#000",
        "fontSize": 11
      },
      "encoding": {
        "detail": {
          "field": "serie"
        },
        "text": {
          "condition": {
            "test": "datum.value > 0.05",
            "type": "quantitative",
            "aggregate": "sum",
            "field": "value",
            "format": ".2%"
          },
          "value": ""
        }
      }
    }
  ],
  "config": {
    "view": {
      "stroke": "transparent"
    },
    "axis": {
      "domainWidth": 1
    }
  }
}

Answer 1

You can use a condition to show or hide text marks. You didn't provide a full dataset with your example so see below for how to implement with one of the standard examples. Labels less than 55 are hidden by the condition.

Editor

{
  "data": {"url": "data/barley.json"},
  "width": 400,
  "encoding": {
    "x": {
      "type": "quantitative",
      "aggregate": "sum",
      "field": "yield",
      "stack": "zero"
    },
    "y": {"type": "nominal", "field": "variety"}
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {"color": {"type": "nominal", "field": "site"}}
    },
    {
      "mark": {"type": "text", "color": "white", "dx": -5, "align": "right"},
      "encoding": {
        "detail": {"type": "nominal", "field": "site"},
        "text": {
          "condition": {
            "test": "datum.sum_yield > 55",
            "type": "quantitative",
            "aggregate": "sum",
            "field": "yield",
            "format": ".1f"
          },
          "value": ""
        }
      }
    }
  ]
}