# Auto Sizing Visualization

**URL:** https://discuss.elastic.co/t/auto-sizing-visualization/261851
**Category:** Kibana
**Created:** [January 21, 2021, 8:13pm UTC](https://discuss.elastic.co/t/auto-sizing-visualization/261851 "2021-01-21T20:13:09Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![gerardo\_dutan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/gerardo_dutan/32/81906_2.png) [@gerardo\_dutan](https://discuss.elastic.co/u/gerardo_dutan)
#### Post date: [January 21, 2021, 8:13pm UTC](https://discuss.elastic.co/t/auto-sizing-visualization/261851/1 "2021-01-21T20:13:09Z")

</div>

I'm having issues with visualizations auto scaling in a dashboard when using Vega visualizations.

The issue occurs when using multiple the multi column functionality in Vega. The output of the Vega script is 2 plots but when I try to view the visualization on the dashboard only the first plot is shown immediately with the other having to be scrolled to. I'm looking to have all the plots show without having to scroll through them. Thanks

Target Visualization:  
 ![Target_Visualization](https://us1.discourse-cdn.com/elastic/original/3X/3/0/304d1348a079aa62941d235b8f9f3f9beb0088b8.png)

Current Dashboard Visualization: (Don't Mind the Color Assignments)

 ![Current_Visualization](https://us1.discourse-cdn.com/elastic/original/3X/d/b/dba8005bbc65e20b6279a64e7f06a3d1899d9915.png)

Vega Script

```auto
{

  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",

  "data": {

    "values": [

        {

          "key" : "224",

          "doc_count" : 1,

          "location" : {

            "doc_count_error_upper_bound" : 0,

            "sum_other_doc_count" : 0,

            "buckets" : [

              {

                "key" : "NY",

                "doc_count" : 1

              }

            ]

          }

        },

        {

          "key" : "225",

          "doc_count" : 2,

          "location" : {

            "doc_count_error_upper_bound" : 0,

            "sum_other_doc_count" : 0,

            "buckets" : [

              {

                "key" : "NY",

                "doc_count" : 1

              },

              {

                "key" : "Germany",

                "doc_count" : 1

              }

            ]

          }

        }

    ]

  },

  "transform": [

    {"flatten": ["location.buckets"],"as": ["test"]}

  ],

  "mark": "bar",

  "encoding": {

    "column":{

      "field":"test.key",

      "type":"ordinal",

      "spacing":20

    },

    "x": {

      "field": "key",

      "type": "nominal",

      "title": "Target ID"

    },

    "y": {

      "aggregate": "count",

      "type": "quantitative",

      "title": "Locations Count",

      "field": "test.doc_count"

    },

    "color": {

      "field": "key",

      "type": "nominal"

    }

  }

}

```

---

<div class="post-metadata">

### Author: ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)
#### Post date: [January 21, 2021, 9:36pm UTC](https://discuss.elastic.co/t/auto-sizing-visualization/261851/2 "2021-01-21T21:36:24Z")

</div>

Thanks for providing a full spec with sample data, it was easy to reproduce your use case.

What I recommend is that you follow [this Vega-Lite doc](https://vega.github.io/vega-lite/docs/size.html#width-and-height-of-multi-view-displays) to set an absolute width for the columns. You can't set a responsive width when using facets. I've never tried using responsiveness in Vega (with more access to the signals), so this answer is for Vega-Lite only.

---

<div class="post-metadata">

### Author: ![gerardo\_dutan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/gerardo_dutan/32/81906_2.png) [@gerardo\_dutan](https://discuss.elastic.co/u/gerardo_dutan)
#### Post date: [January 21, 2021, 11:50pm UTC](https://discuss.elastic.co/t/auto-sizing-visualization/261851/3 "2021-01-21T23:50:31Z")

</div>

Yeah I think I got it to work using absolute column widths in Vega lite using facets. For the data I intend to be utilizing I really don't know how many columns it'll require so I'll look into using Vega and post here if I find anything useful. Thanks again.

Vega lite script for reference that did the trick with absolute column widths:

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
        {
          "key" : "224",
          "doc_count" : 1,
          "location" : {
            "doc_count_error_upper_bound" : 0,
            "sum_other_doc_count" : 0,
            "buckets" : [
              {
                "key" : "NY",
                "doc_count" : 1
              }
            ]
          }
        },
        {
          "key" : "225",
          "doc_count" : 2,
          "location" : {
            "doc_count_error_upper_bound" : 0,
            "sum_other_doc_count" : 0,
            "buckets" : [
              {
                "key" : "NY",
                "doc_count" : 1
              },
              {
                "key" : "Germany",
                "doc_count" : 1
              }
            ]
          }
        }
    ]
  },
  "transform": [
    {"flatten": ["location.buckets"],"as": ["test"]}
  ],
  "facet":{
    "column":{"field":"test.key"}
  },
  "spec":{
    "width":300,
    "height":600,
    "mark": "bar",
    "encoding": {
      "x": {
        "field": "key",
        "type": "nominal",
        "title": "Target ID"
      },
      "y": {
        "aggregate": "count",
        "type": "quantitative",
        "title": "Count",
        "field": "test.doc_count"
      },
      "color": {
        "field": "key",
        "type": "nominal",
        "title":"type"
      }
    }
  }
}

```

---

<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 18, 2021, 11:50pm UTC](https://discuss.elastic.co/t/auto-sizing-visualization/261851/4 "2021-02-18T23:50:38Z")

</div>

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