The display of a signal element in the Vega visualization within a Kibana dashboard is not fully displayed using autosize - vega

Question

I want to have a display of Vega in Kibana, with the autosize active to be able to adjust it to any size in a dashboard, but I can't get it to show me the signal (radio type) without having to use the scroll bar.
Here I show an example code where you can see the problem I have. In this case, I don't have the signal linked to anything yet, because what I need to solve first is that it can be seen easily, without the need to use a scroll:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"signals": [
{
"name": "radio_signal", "value": "ALL",
"bind": {"input": "radio", "options": ["ALL", "OK", "NOK"]}
},
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale",
"title": "X-Axis",
},
{ "orient": "left",
"scale": "yscale",
"title": "Y-Axis",
"tickCount": 4,"offset": 6 }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "isNaN(tooltip.amount)", "value": 0},
{"value": 1}
]
}
}
}
]
}

Answer 1

You need to slightly adjust the height and width signals by 10 to 20 depending on how long the names of your radio signals are, this will essentially zoom out your visualisation slightly. I've had instances where I need to subtract 40 so play around with this value a bit. For example try adding this to the signal spec...
...
signals: [
...
{
height: height - 10
}
{
width: width -10
}
...
]
...