# Vega in Kibana - how to make the chart responsive to resizing

**URL:** https://discuss.elastic.co/t/vega-in-kibana-how-to-make-the-chart-responsive-to-resizing/294841
**Category:** Kibana
**Tags:** vega
**Created:** [January 19, 2022, 3:22pm UTC](https://discuss.elastic.co/t/vega-in-kibana-how-to-make-the-chart-responsive-to-resizing/294841 "2022-01-19T15:22:12Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![katja1](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@katja1](https://discuss.elastic.co/u/katja1)
#### Post date: [January 19, 2022, 3:22pm UTC](https://discuss.elastic.co/t/vega-in-kibana-how-to-make-the-chart-responsive-to-resizing/294841/1 "2022-01-19T15:22:12Z")

</div>

Hello all,

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:

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

```

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/e/9/e9c703e4d537e9645c3e3d0acf0922130371e54a.png)

The bar chart after resizing - data does not adjust to the window  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/5/1/515bf9e648893523ab5ac9dce76dfeb98d60735f.png)

I also tried to follow the instructions here [Customizing Size | Vega-Lite](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:

```auto
{
  $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!

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)
#### Post date: [February 16, 2022, 3:23pm UTC](https://discuss.elastic.co/t/vega-in-kibana-how-to-make-the-chart-responsive-to-resizing/294841/2 "2022-02-16T15:23:02Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.