Vega Issue: Autosize "fit-y" and Horizontal Scroll Bar

The following line in a Vega-Lite specification produces and chart where columns have a fixed width (in this case 20), and a horizontal scroll bar is automatically created if there are too many columns to fit within the overall width of specification. If the number of columns fits without the need for scrolling, the scrollbar disappears.

"width": {"step": 30}

In Vega, it appears that the way to accomplish this behavior is to use the “autosize” object with the “type” set to “fit-y” in conjunction with the step size in the “width.” HOWEVER, the problem I’m having is that the horizontal scroll bar is present all the time. Even when the columns all fit within the size of the specification, there is still a scroll bar.

  "autosize": {
    "contains": "padding",
    "type": "fit-y"
  },
.
.
.
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "dataset",
        "field": "myfield"
      },
      "range": {"step": 30}
    },
.
.
.
]

Any guidance would be appreciated! Thanks!

Bumping this post for more visibility from our experts and users.

@dm-p, sorry to tag you again, but nobody else seems to have any ideas. Not extremely urgent. Whenever you get a chance, I’d appreciate any insight you might have. This is definitely going to be a barrier to using Vega specifications for me which is a shame because I really like the additional flexibility it provides over Vega-Lite. Thanks!

To illustrate a little better the issue I’m having, here are a couple of screenshots from the Deneb edit window. Both show a column chart with a step size of 20 for the “rect” mark, and both have few enough columns in the chart that there should be no need to scroll. In the first one, you can see how the entire chart including axes and grid fit in the visible area. In the second one, you can see how the grid pushes beyond the right side of the visible area. This causes a horizontal scroll bar to appear when not in “edit” mode. The only difference between the two is that the first on is set to “fit” and the second to “fit-y” in the “type” property of the “autosize” object (ee attached PBIX for a working example).

I need to figure out how to have it set to “fit-y” so that a horizontal scroll bar will appear when needed, but have the scroll bar disappear when it is not needed.

Fit-Y Vega Issue.pbix (1.6 MB)

Hi @DaveC

We have noticed that your inquiry has remained unresolved for an extended period of time, indicating that it may have been outside the capabilities of our experts and users.

If you believe that you have provided all the necessary context for your concerns and have familiarized yourself with effective forum usage by referring to this guide, we recommend exploring the additional resources included with your subscription. These resources can provide valuable assistance with your Power BI education, and we encourage you to utilize them.

While our users and experts strive to assist with inquiries to the best of their abilities, it is important to acknowledge that not all concerns can be addressed, particularly when there are valuable learning opportunities involved. Thank you for your understanding.

We sincerely hope that you find the solution you are seeking and achieve your desired outcome.

Well, it looks like this topic has been closed out even though there was never any solution provided. If anyone has any further insights on how to resolve this, please share. Thanks!

Hi @DaveC - looks like that the x-coordinate is resolved differently with fit-y setting enabled, and because we’re trying to deal with a container size that’s dynamic, the derived width value for this isn’t resolving exactly to this value by Vega.

I’m not sure that this is an easy solve without a fix there, and I’d have to do some analysis as to whether it’s a quirk of Vega or Power BI’s adjustment of the available space (although the sizes it gives us are supposed to exclude any padding or further settings applied to the part of the visual container we don’t have access to). We pass these height and width values of the container to Vega to resolve, so I don’t think we can manipulate this without affecting the behaviour of Deneb for all users and causing regression issues.

However, for your situation, you could set the top-level width property to use the special pbiContainerWidth signal (visible in the Signals pane) with an adjustment by as many pixels as you need to bring it in. Based on default Vega padding, I’d probably make this 10 (which is the total of left + right padding of 5 pixels each), e.g.:

"width": {"signal": "pbiContainerWidth - 10"}

This should then look similar to your other example, e.g.:

Hopefully this is a workable option for you.

Cheers,

Daniel

2 Likes

Thanks! This worked great for my example with a static step size. Now, I’m working on trying to come up with the right calculations to adjust the step size based on the number of columns. Haven’t figured out the right formula yet, but this gets me a lot closer.