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

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}
          ]
        }
      }
    }
  ]
}
vegakibana-7


Solution 1:[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
  }
  ...
]
...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dedidod

Related Questions