Forum Discussion
Deneb: How to set a minimum width with dynamic step sizing?
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?
3 Replies
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!
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.
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!
-
