Vega/ Vega-lite in Kibana - how to make the chart responsive to resizing

Question

I created a dashboard in Kibana and included also some Vega visualizations. My problem is that I cannot make the Vega bar chart responsive in sense of dynamically adjusting the size when the window size changes:

The bar chart on the dashboard

Settings:

autosize: {
 type: "fit",
 contains: "padding",
 resize: true,
            }

Bar chart on the dashboard

The bar chart after resizing - data does not adjust to the window

Bar char after resizing

I also tried to follow the instructions here https://vega.github.io/vega-lite/docs/size.html and used setting width or height to "container", but nothing worked, or I am defining them incorrectly.

The complete Vega specification is available below:

{
  $schema: https://vega.github.io/schema/vega-lite/v5.json
  title: Test
   autosize: {
    type: "fit",
    contains: "padding",
    resize: true,
                },
  
  
  // Define the data source
  data: {
    url: {
      %context%: true
      %timefield%: time
      
      index: test
      
      body: {
        "aggs":{
          "date_hist":{
            "date_histogram": {
              "field": "time",
              "calendar_interval": "day",
              "format": "strict_date"
              
            },
            "aggs":{
              "state":{
                "terms": {
                  "field": "f.keyword",
                  "include":["active","revoked"],
                  "min_doc_count": 0, 
                  "size": 10000
                  
                }
              },
              "increased":{
                "bucket_script": {
                  "buckets_path": {
                    "in": "state['active']>_count",
                    "out": "state['revoked']>_count"
                  },
                  "script": "params.in - params.out"
                }
              },
              "active_patients":{
                "cumulative_sum": {
                  "buckets_path": "increased"
                }
              }
            }
          }
        },
        "size":0
      }
    }
         format: {property: "aggregations.date_hist.buckets"}
  }
 
  mark: bar
  encoding: {
    x: {
      
      field: key_as_string
      type: ordinal
      axis: {title: "Date", "labelAngle": 45} 
    }
    y: {
      
      field: active_patients.value
      type: quantitative
      axis: {title: " "}
    }
    "color": {"value": "#00A6CE "}
  }
}

I would appreciate any assistance!

Answer 1

You need to create a signal that will listen window resize event. This signal will read the container width.

"signals": [
    {
      "name": "width",
      "init": "containerSize()[0]",
      "on": [{ "events": "window:resize", "update": "containerSize()[0]" }]
    }
  ],

After that, you need to define a range on xscale to read the signal previously created.

"scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "your_value"},
      "range": [0, { "signal": "width" }],
      "padding": 0.05
    },
]