# Vega visualization issue

**URL:** https://discuss.elastic.co/t/vega-visualization-issue/275929
**Category:** Kibana
**Tags:** vega
**Created:** [June 15, 2021, 4:53am UTC](https://discuss.elastic.co/t/vega-visualization-issue/275929 "2021-06-15T04:53:51Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![Nisha2297](https://avatars.discourse-cdn.com/v4/letter/n/d2c977/32.png) [@Nisha2297](https://discuss.elastic.co/u/Nisha2297)
#### Post date: [June 15, 2021, 4:53am UTC](https://discuss.elastic.co/t/vega-visualization-issue/275929/1 "2021-06-15T04:53:51Z")

</div>

My Vega visual is throwing below errors. Can anyone help me on what these errors signify.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/1/3/13d07124e44a15c2b77be2796aff29f1cc494262.png)

---

<div class="post-metadata">

### Author: ![Nisha2297](https://avatars.discourse-cdn.com/v4/letter/n/d2c977/32.png) [@Nisha2297](https://discuss.elastic.co/u/Nisha2297)
#### Post date: [June 15, 2021, 9:53am UTC](https://discuss.elastic.co/t/vega-visualization-issue/275929/2 "2021-06-15T09:53:46Z")

</div>

Hi @rashmi ,  
Can you plz help me in resolving this error. This is syntax error which I am getting, logic wise I believe the code is fine

---

<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: [June 15, 2021, 2:03pm UTC](https://discuss.elastic.co/t/vega-visualization-issue/275929/3 "2021-06-15T14:03:22Z")

</div>

You must use pixel sizes when using repeated Vega views.

---

<div class="post-metadata">

### Author: ![Nisha2297](https://avatars.discourse-cdn.com/v4/letter/n/d2c977/32.png) [@Nisha2297](https://discuss.elastic.co/u/Nisha2297)
#### Post date: [June 16, 2021, 4:28am UTC](https://discuss.elastic.co/t/vega-visualization-issue/275929/5 "2021-06-16T04:28:40Z")

</div>

I found out that the error is causing when I'm using "vconcat" for multiple views. I am building a bar chart along with the Minimap scroller. When I removed the code of Minimap scroller, the error had gone.  
Can you please suggest me the correct property/configuration to add both the views in vconcat.  
Below is the code I'm using: -

```auto
  vconcat : [
  {
  "height" : 100,
  "width" : 800,
  "autosize": {"type": "fit", "resize": true},
  "title": {
    "text": "Non Accessed - Database#Tablename vs Doc_size in bytes",
    align: center
  
  }
    "mark": "bar"
    
    "transform": [{
      "filter": {"selection": "brush"}
    }
      
    ],
      "encoding": {
      
      "x": {
        "field": fullname
        "type": nominal
         "sort": {"op":"sum", "field": "size.value", "order": "descending"}
        "axis": {labelAngle: -45 , "labelcolor":"green", "labelFontSize":"20","title":null},
         
      },
      "y": {
        "field": "size.value"
        type: quantitative
           
        "axis": null

      }
  "tooltip": [{"field": "fullname", "type": "nominal","title": "DB / Table"},
  {"field": "size.value", "type": "quantitative", "title": "Doc_size in bytes","format": "~s"}
  ],
    },
    "layer": [{
    "mark": {"type": "bar", "color": "#15c8e8"}
  }, {
    "mark": {
      "type": "text",
      "align": "left",
      "baseline": "middle",
      "dx": -25,
      "dy": -15,
      "color": "black"
      "fontSize":14
       "sort": {"op":"sum", "field": "size.value", "order": "descending"}
    },
    "encoding": {
      "text": {"field": "size.value", "type": "quantitative", "format": "~s" }
           
      
    }
  }]
  
  },
  {
  "autosize": {"type": "fit", "resize": true},
  "height" : 50,
  "width" : 1000,
  "title": {"text": "Mini-Map Select & Scroll to view the distribution", "orient": "bottom"},
 
    "selection": {
      "brush": {
        "type": "interval",

        "encodings": ["x"]
      }

    },
    "mark": "bar",
      "encoding": {
            
      "x": {
        "field": fullname
        "type": nominal
        "axis": null
        "sort": {"op":"sum", "field": "size.value", "order": "descending"}
      },
      "y": {
        "field": "size.value"
        type: quantitative
            "axis": null

      }

    }
    
    
  }
  
  ]

```

---

<div class="post-metadata">

### Author: ![Nisha2297](https://avatars.discourse-cdn.com/v4/letter/n/d2c977/32.png) [@Nisha2297](https://discuss.elastic.co/u/Nisha2297)
#### Post date: [June 16, 2021, 4:41am UTC](https://discuss.elastic.co/t/vega-visualization-issue/275929/6 "2021-06-16T04:41:41Z")

</div>

Also @wylie , please help me where to use Pixel configuration in my code. I explored but unable to find any pixel property for Vega.

---

<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: [June 16, 2021, 3:40pm UTC](https://discuss.elastic.co/t/vega-visualization-issue/275929/7 "2021-06-16T15:40:59Z")

</div>

The message you are seeing appears to be an actual bug: [[Vega-Lite] in mode "autosize": "none" the row and column constructions do not work. · Issue #95291 · elastic/kibana · GitHub](https://github.com/elastic/kibana/issues/95291), it might be possible to use Vega instead of Vega-Lite but most likely you have to live with the warning message.

In the future, please follow the [instructions for asking about Vega specs](https://www.elastic.co/guide/en/kibana/current/vega.html#asking-for-help-with-a-vega-spec). It is usually impossible to help without a reproduceable spec.

---

<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: [June 16, 2021, 6:33pm UTC](https://discuss.elastic.co/t/vega-visualization-issue/275929/8 "2021-06-16T18:33:23Z")

</div>

I have confirmed that yes, you can use Vega instead of Vega-Lite. You can convert Vega-Lite into Vega by:

- Opening the browser dev tools from Kibana and type `VEGA_DEBUG.vega_spec`.
- Or using the Online Vega Editor from the Vega documentation

---

<div class="post-metadata">

### Author: ![Nisha2297](https://avatars.discourse-cdn.com/v4/letter/n/d2c977/32.png) [@Nisha2297](https://discuss.elastic.co/u/Nisha2297)
#### Post date: [June 17, 2021, 4:41am UTC](https://discuss.elastic.co/t/vega-visualization-issue/275929/9 "2021-06-17T04:41:25Z")

</div>

Thanks for your help @wylie  
I was able to solve the issue by using below property at the top: -  
_ **{autosize: type : 'none',** _  
_ **contains : 'content'}** _

---

<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: [July 15, 2021, 4:41am UTC](https://discuss.elastic.co/t/vega-visualization-issue/275929/10 "2021-07-15T04:41:53Z")

</div>

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