Vega visualization issue

Elastic Stack Kibana
1

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

image
image693×246 18.8 KB

2

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

3

You must use pixel sizes when using repeated Vega views.

5

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: -

  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

      }

    }
    
    
  }
  
  ]
6

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

7

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, 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. It is usually impossible to help without a reproduceable spec.

8

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
1 Like
9

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

10

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