Deneb (Vega lite) fixed hconcat widths when filtering

Question

How can I fix the widths of visuals when concatenated with hconcat in Vega Lite such that they don't move when filtering?

I've set width values for my visuals inside the hconcat list, expecting would stay in fixed positions however they seem to move when the chart is filtered (sliced).

I need them fixed to align with other visuals on my dashboard page.

Here's an example, the Vega Lite chart is made up of hconcat of two horizontal bar charts. Pay attention to the horizontal positions of the x = 0 (where the bar charts start).

To observe how the horizontal positions change, I've added a rectangle with a red border and transparent fill above the x = 0 starting positions.

With no slicing, the red rectangle touches the bars on edge, and intersects the x = 0 labels. When I slice on the 'b', a gap appears between the bars and the red rectangle. (Only a slice action was performed, nothing was moved, etc.).

Zooming in:

The change is not very big in this toy example, I'm not sure what causes it so I wasn't sure how to doctor it to make the gap look bigger, however in my real use case the changes are very noticeable.

Here's the code for the example:

{
  "data": {"name": "dataset"},
  "transform": [
    {
      "calculate": "if(datum.yval == 'top', datum.xval, 0)",
      "as": "top_val"
    },
    {
      "calculate": "if(datum.yval == 'bottom', datum.xval, 0)",
      "as": "bottom_val"
    }
  ],
  "hconcat": [
    {
      "width": 300,
      "layer": [
        {
          "mark": {"type": "bar"},
          "encoding": {
            "x": {
              "field": "bottom_val",
              "type": "quantitative",
              "sort": "descending"
            },
            "y": {"field": "category"}
          }
        }
      ]
    },
    {"width": 50, "mark": "text"},
    {
      "width": 300,
      "layer": [
        {
          "mark": {"type": "bar"},
          "encoding": {
            "x": {
              "field": "top_val",
              "type": "quantitative"
            },
            "y": {
              "field": "category",
              "axis": {"title": null, "labels": false}
            }
          }
        }
      ]
    }
  ]
}

I'm not sure how to json from table in powerbi, so here is a copy-paste as csv:

category,xval,yval
a,100,top
a,13,bottom
b,2,bottom
b,30,top
c,80,top
c,90,bottom

Here's a link to the PBIX file. It has a slicer and the above chart. Click on 'b' in the slicer and observe the horizontal position of x = 0 on the right chart moves. How can it be made to stay in place with slicing?

Answer 1

Try setting a minExtent. e.g.

{
  "data": {"name": "dataset"},
  "bounds": "flush",
  "align": "each",
  "spacing": 0,

  "transform": [
    {
      "calculate": "if(datum.yval == 'top', datum.xval, 0)",
      "as": "top_val"
    },
    {
      "calculate": "if(datum.yval == 'bottom', datum.xval, 0)",
      "as": "bottom_val"
    }
  ],
  "hconcat": [
    {
      "width": 100,
      "layer": [
        {
          "mark": {"type": "bar"},
          "encoding": {
            "x": {
              "field": "bottom_val",
              "type": "quantitative",
              "sort": "descending"
            },
            "y": {"field": "category", "axis":{"minExtent": 40}}
          }
        }
      ]
    },
    {
      "width": 200,
      "layer": [
        {
          "mark": {"type": "bar", "fill":"red"}
     
        }
      ]
    },
    {
      "width": 100,
      "layer": [
        {
          "mark": {"type": "bar"},
          "encoding": {
            "x": {
              "field": "top_val",
              "type": "quantitative"
            },
            "y": {
              "field": "category",
              "axis": null
            }
          }
        }
      ]
    }
  ]
}