How to center react mark in stacked bar chart in vega lite?

Question

I'm having issues with the transform and mark rect in Vega-Lite. I'm using transform to calculate the stack and get the midpoint of the stacks. My goal is to have the rectangles centered within the stacked bars. In the code below, by default, the position of the rectangle is correct when the mark bar is sorted in ascending order. However, when I set it to descending for the bar, the issue arises. I've tried adding "descending" to the mark rect, but it doesn't seem to work. Can someone help me address this issue?

Image:

Source vega lite: https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAdxoATemgBsABh1L4NMljQBmPUrVJMSCHEwQ0oGQwBOUOGgDaoAMLXyNlcATwA5JARPdABZABvFEGiaNBAAJgAWHQBOLMos9IB2dK0SgqyCgA5TBN82BBTTcrExBIBxJDYUjLEckABfBT8AsiCwiKiQACEAL-klJK7TCvTUvJ1U-LEtMR1TMVSauq6dLYq2jq6ARnSxdP7BkH9MQJDwyJTfGABDzvnk9EuWVS20ohVSFVuWR6lUO9XQ4IKOjOSnanXQ5lSt36AF0BiBBEhgnBXN5QASiSTUD4QFYbE4QLJxikXO5PHjkK4ANb0zDBHATJhIElKJDCMjydAeWTPEl4zCuJCyCAAMyCcOpqsEam8iWSSlq9RRF2xIscVJAvP5CVccAgDEEmBAuIeEBsUG56BtdodCTYyuVdkd6AAXsTfiBbDrBGxlMSAEq24mkADyrjUxISDBw-NcCdIrjsqfTJJNIDIrjYWaYwR1TxeY3euNLcFkUDYahosjI9IAHvTlTQ4FqPsNRm9PEpMHRBBM6yMQgACccJS0TIIdxmCe4gGuoUADofaz22+2Oyd8iYARwYiqnNinpBX04mAAUK2oGFBMAu3zQPAuAGUGAQBQAEk1EA0VbQXaJFQgQDgIUADMCCOAF3AhDDRAV0kHdFJQwrbd1wzPcQAPYd0CzHM82JQs0wzc8rXQWQ6k7UUEhkVwgxpW0pQ3bs8TbaNKVAVcUhYhA2K3JRyKPC0LyfTAZxSDioCg+kFS7KIvBAABiW4tEmAAxLIEl0oyjIKZoCjMsRJkmAoAEEjKdSw6iQTsdQWfUjiNTpnXxcgWyPUAgkHaUUiYNhsF8mkaBtL92AlDAwuDOQbC3PosoGUBaRQUjGXedAWQ8bd5Tg1VXHVfc2AonTvMeWLUVciMzR0sSlC9U8nRy7C3Q9EAup9JQ-QDex8LDBJI3NaNY2FEAqIzUty0rHBq1rUdXiZZ1QDUwQoHtAIUgAClpYDKEW1wFwAagXM6EEoWbiQASgXAgFwOU0UkktQcDYTtHT6UsOQ9USFOPL8EiEoIUnMiz4d9HBcLoXcdEoLQDDgIwTFQS4JAxlR1E0VBzCUNtXFkeMkA7BgzTEPEWzbfje37QcKMeTaGwneSmJAdcpO3Xd9zZuSfr+gGV3BkBr1vOhrBoR9stLL1asfUjoHU0jocpEBO3TflZHTCKlb6IA

Answer 1

Your layers were not ordered in the same way. Try this:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 600,
  "height": 300,
  "datasets": {
    "source": [
      {"CategoryName": "Mì", "Mi": "24099", "Com": "39755", "Gao": "24599"},
      {"CategoryName": "Bún", "Mi": "23842", "Com": "20568", "Gao": "21454"},
      {"CategoryName": "Cháo", "Mi": "19265", "Com": "28708", "Gao": "30254"}
    ]
  },
  "transform": [
    {"fold": ["Mi", "Com", "Gao"], "as": ["type", "result"]},
    {
      "stack": "result",
      "offset": "zero",
      "as": ["lower", "upper"],
      "groupby": ["CategoryName"]
    },
    {"calculate": "(datum.upper + datum.lower) / 2", "as": "midpoint"},
    {
      "stack": "result",
      "offset": "zero",
      "as": ["lowerReserveOrder", "upperReverseOrder"],
      "groupby": ["CategoryName"]
    },
    {"calculate": "indexof(['Mi', 'Com', 'Gao'], datum.type)", "as": "order"}
  ],
  "layer": [
    {
      "layer": [
        {
          "mark": {"type": "bar", "align": "center"},
          "encoding": {
            "order": {"field": "order", "type": "ordinal"},
            "x": {
              "field": "CategoryName",
              "title": "Category Name",
              "type": "ordinal"
            },
            "y": {
              "field": "result",
              "type": "quantitative",
              "title": "Product Price Sum, Id Sales Mans Sum, Store Id Sum",
              "stack": "zero"
            },
            "color": {
              "type": "nominal",
              "field": "type",
              "title": "",
              "scale": {
                "range": ["#546BF9", "#FF7557", "#5BB7AF"],
                "domain": ["Mi", "Com", "Gao"]
              },
              "legend": {"orient": "bottom", "direction": "horizontal"}
            }
          }
        },
        {
          "mark": {
            "type": "rect",
            "color": "#FFFFFF",
            "opacity": 0.6,
            "height": 15.6,
            "width": 30,
            "cornerRadius": 5
          },
          "encoding": {
            "order": {"field": "order", "type": "ordinal"},
            "x": {
              "field": "CategoryName",
              "type": "ordinal",
              "title": null,
              "axis": {
                "labelAngle": 0,
                "labelAlign": "center",
                "labelPadding": 10
              }
            },
            "y": {"field": "midpoint", "type": "quantitative", "stack": "zero"},
            "tooltip": [{"field": "type"}, {"field": "result"}]
          }
        }
      ],
      "resolve": {"scale": {"color": "independent"}}
    }
  ]
}