Is there a workaround to enable auto-size with vega-lite facet charts?

Question

I'm using vega-lite in deneb on Power BI.

I am creating a chart that has a single column of facets of horizontal bar charts. I also use a slicer to change the values on the y axis depending on what the user wants.

My issue is since the length of the y-axis values vary drastically, the bar charts are not consistently auto-sizing depending on what I select in the slicer. This leaves chunks of whitespace at the end of the graph:

e.g. when the 'long' category is selected, the chart fits within the border perfectly

But when 'short' is selected, there is extra whitespace

My aim is to have the bars (data container) stretch to fill the extent of the deneb visual, even if I select the 'Short' category.

I have played around with the various height and width options, but from my understanding of the vega-lite doco, auto-sizing does not work with facet charts.

I am therefore wondering if anyone has come up with a possible workaround?

Here's the code I have been working on (noting the dataset component here is normally just the Power BI columns)

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "category": "Category1",
        "value": 90,
        "facet": "x",
        "slicer": "Short"
      },
      {
        "category": "Category2",
        "value": 20,
        "facet": "x",
        "slicer": "Short"
      },
      {
        "category": "Category3",
        "value": 30,
        "facet": "x",
        "slicer": "Short"
      },
      {
        "category": "Super Very Long Category 11111111111",
        "value": 100,
        "facet": "y",
        "slicer": "Long"
      },
      {
        "category": "Super Very Long Category 22222222222",
        "value": 70,
        "facet": "y",
        "slicer": "Long"
      },
      {
        "category": "Category1",
        "value": 100,
        "facet": "y",
        "slicer": "Short"
      },
      {
        "category": "Category2",
        "value": 10,
        "facet": "y",
        "slicer": "Short"
      },
      {
        "category": "Category3",
        "value": 32,
        "facet": "y",
        "slicer": "Short"
      },
      {
        "category": "Super Very Long Category 11111111111",
        "value": 90,
        "facet": "x",
        "slicer": "Long"
      },
      {
        "category": "Super Very Long Category 22222222222",
        "value": 30,
        "facet": "x",
        "slicer": "Long"
      }
    ]
  },
  "facet": {
    "field": "facet",
    "type": "ordinal"
  },
  "columns": 1,
  "spec": {
    "mark": "bar",
    "encoding": {
      "y": {
        "field": "category",
        "type": "ordinal"
      },
      "x": {
        "field": "value",
        "type": "quantitative"
      }
    }
  }
}

EDIT

What happens when I use an explicit "width" = 500 from Davide Bacci's suggestion:

Answer 1

This is not exactly what you want, but I was struggling with similar issue, so here's my solution:

Objective: A visualization's width must always fit the container's width that wraps the visualization.

Idea:

1. Define an initial width for your visualization schema to be large enough to render all the details.
2. Calculate the width of the visualization wrapper. (Using `element.getBoundingClientRect() for instance)
3. Calculate the width of the rendered visualization. (Using `element.getBoundingClientRect() for instance)
4. Define scaleFactor that applied on the visualization, will resize it to match wrapper's width. Let scaleFactor be scaleFactor=wrapper_width / original_visualization_width.
5. Apply transform: scale(scaleFactor) CSS property for the visualization root element (not wrapper).

Problem: When transform: scale is applied, vega mouse interactions are broken due to mismatched mouse positions. If your visualizations don't need to interpret mouse signals, you can ignore the Solution below.

Solution: I found that the Vega library ignores an offset of the element when performing UI calculations. I've proposed a solution in the PR: https://github.com/vega/vega/pull/3978.

You can patch your project's Vega dependency with one from my commit hash until this won't be reviewed by the core Vega team.

Answer 2

What happens if you set an explicit width:

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "category": "Category1",
        "value": 90,
        "facet": "x",
        "slicer": "Short"
      },
      {
        "category": "Category2",
        "value": 20,
        "facet": "x",
        "slicer": "Short"
      },
      {
        "category": "Category3",
        "value": 30,
        "facet": "x",
        "slicer": "Short"
      },
      {
        "category": "a 11111111111",
        "value": 100,
        "facet": "y",
        "slicer": "Long"
      },
      {
        "category": "a 22222222222",
        "value": 70,
        "facet": "y",
        "slicer": "Long"
      },
      {
        "category": "Category1",
        "value": 100,
        "facet": "y",
        "slicer": "Short"
      },
      {
        "category": "Category2",
        "value": 10,
        "facet": "y",
        "slicer": "Short"
      },
      {
        "category": "Category3",
        "value": 32,
        "facet": "y",
        "slicer": "Short"
      },
      {
        "category": "a 11111111111",
        "value": 90,
        "facet": "x",
        "slicer": "Long"
      },
      {
        "category": "a 22222222222",
        "value": 30,
        "facet": "x",
        "slicer": "Long"
      }
    ]
  },
  "facet": {
    "field": "facet", 
    "type": "ordinal"
  },
  "columns": 1,
  "spec": { "width":500, 
    "mark": "bar",
    "encoding": {
      "y": {
        "field": "category",
        "type": "ordinal"
      },
      "x": {
        "field": "value",
        "type": "quantitative"
      }
    }
  }
}