Responsive Bar Chart Example Is Not Actually Responsive

[PBI-David]

Using the code from the responsive bar chart example in the main editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": 250,
  "data": {"url": "data/cars.json"},
  "mark": "bar",
  "encoding": {
    "x": {"field": "Origin"},
    "y": {"aggregate": "count", "title": "Number of Cars"}
  }
}

I have tried in both FF and Chrome and I'm not sure it is behaving correctly.

If you resize the container to be more narrow, the bars do not have equal widths. In fact, one can be cut off:

I'm not sure if this is a regression or it has always been this way but it doesn't look right.

[domoritz]

Works for me in safari (a bit janky but works) for https://vega.github.io/editor/#/examples/vega-lite/bar_size_responsive.

Screen.Recording.2024-01-14.at.09.24.21.mov

[PBI-David]

@domoritz - your video shows it not working though. The bars are not proportionally sized.

On further investigation, I can get this working in FF and Chrome if I wiggle the mouse around on resize. I think this is something to do with the mouse/pointer event functionality that was recently introduced in Vega. It might be an idea to move this to Vega as the raw Vega spec has the exact same issues.

[domoritz]

Oh, I see what you mean. I can wiggle a bit and then it's correct. I suspect it's some issue with the editor but would need to investigate more.

Screen.Recording.2024-01-14.at.15.50.25.mov

[PBI-David]

Are you sure it is the editor and not related to vega/vega#3825.

[domoritz]

No, I am not and there could be some interaction here. But resizing should only be driven by the size of the container and not any mouse or cursor events.