Making Vega-Lite bar marks adjacent

Question

I'm working on a bar plot in Vega-Lite (generated using Altair). Using the Vega-View API, I've written some code where users can select bars, which changes those bars' colors (along with doing some other stuff elsewhere in the application; the details aren't super important for this question).

My problem is this. Using the default continuousBandSize of 5, when zoomed out the bars seem to "overlap" each other horizontally. Here's a screenshot of this problem. This problem is resolvable by setting continuousBandSize to 1, but the problem then is that -- when you zoom in to the chart -- the bars become very thin and hard for users to select. (Furthermore, since I'm coloring the bars gray by default, they become hard to distinguish from the grid behind the visualization; and I'd prefer to keep the grid if I can.) Here's a screenshot of this problem.

Is it possible to make the bar marks in Vega-Lite adjacent at any zoom level? Or is this not feasible?

Prior research on this problem

The problem of bars being too thin is mentioned in an issue on Vega-Lite's GitHub page here, but that issue seems to address a different problem (of the bars going outside of the visualization).

I've looked into using padding, paddingInner, and paddingOuter (as mentioned in the Vega-Lite documentation and in the answer to this question), with no success. The problem of increasing sizes causing bars to overlap is also brought up in an (unanswered) comment on this answer.

Example Vega-Lite Specification

An example specification showing a subset of the plot I'm working on (with continuousBandSize set to 1 to show the "thin-bar" problem) is available in the Vega Editor here (apologies for the long URL). As mentioned above, if you zoom in too far with continuousBandSize set to 1, the gray bars become very thin and hard to see. And if you set continuousBandSize to something like 2 or above and zoom out too far, the bars start to overlap each other (this is demonstrated by the blue bar starting to get slightly "covered" by the gray bar to its right -- this isn't super visible here since this is only a subset of the full plot, but the problem is a lot clearer when there are ~500 bars).

Thanks!

Answer 1

In your chart you are setting the x scale type to quantitative, which leads to very thin bars:

If you set the x scale to ordinal instead, the bars fill the space:

In general, bar charts perform better with non-continuous data.