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