Deneb: How to set a minimum width with dynamic step sizing?

[Abhijith19]

I’m using a Deneb visual to display the number of tickets across different venues as a bar chart. The number of venues varies depending on the filter selection.

Currently, I’m using "width": { "step": 70 } so that the chart adjusts dynamically with the number of venues. This works fine when there are many venues, since the chart shows a horizontal scrollbar as expected.

However, when only a small number of venues are selected (for example, just 1 or 2), the chart becomes very narrow and leaves a large amount of white space on the right-hand side.

Is there a way to set a minimum width for the visual (or another approach) so that it doesn’t shrink too much when only a few categories are selected?

[BeaBF]

@Abhijith19 Hi!

Option 1: Use container width and let Vega-Lite fill space

"width": "container"

This tells the chart to always fill the width of the Deneb visual.

Option 2: Use a calculated width with step and a minimum

If you want both scrollbars and a minimum width, you can compute it in a signal (requires Vega, not just Vega-Lite). In Deneb, you can switch to a Vega spec:

"width": { "signal": "max(availableWidth, 70 * domain('x').length)" }

• domain('x').length → number of categories in your x-axis.

• 70 * … → your step-based width.

• max(availableWidth, …) → enforces a minimum.

• In Deneb, availableWidth corresponds to the actual visual size.

BBF

💡 Did I answer your question? Mark my post as a solution!

👍 Kudos are appreciated

🔥 Proud to be a Super User!

[Abhijith19]

Hello @BeaBF ,
Thanks for the reply.
Option 1: I tried this approach, and it works fine when there are only a few categories on the x-axis. However, when more items are included, the visual tries to fit everything in, which compresses the bars and makes them unreadable. I need to make it dynamic for both conditions.

Option 2:  It’s supported only in Vega. I need to use Vega-Lite since I’m using this visual to apply pattern fills.

Really appreciate your help and suggestions.

[BeaBF]

@Abhijith19 Hi! 

You can combine width: "container" with the x.band and x.paddingInner properties to make the bars stay readable even when you have many categories.

Here’s a refined Vega-Lite pattern you can use in Deneb:

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"name": "dataset"},
"width": "container",
"height": 300,
"mark": {"type": "bar"},
"encoding": {
"x": {
"field": "Venue",
"type": "ordinal",
"axis": {"labelAngle": -40},
"spacing": 0
},
"y": {"field": "Tickets", "type": "quantitative"}
},
"config": {
"bar": {"band": 0.8}, // wider bars (0.7–0.9 works well)
"scale": {
"x": {
"paddingInner": 0.2, // add spacing between bars
"clamp": true // prevents over-squashing of bands
}
},
"view": {"stroke": "transparent"} // removes default border
}
}

BBF

💡 Did I answer your question? Mark my post as a solution!

👍 Kudos are appreciated

🔥 Proud to be a Super User!