Useful Links

When using Vega and VegaLite examples, you may need to modify the "data" section to use absolute URL. For example, replace "url": "data/world-110m.json" with "url": "https://vega.github.io/editor/data/world-110m.json". Also, regular Vega examples use "autosize": "pad" layout model, whereas Kibana uses fit. Remove all autosize, width, and height values. See sizing and positioning below.

These options are specific to the Kibana.

{
  config: {
    kibana: {
      // Placement of the Vega-defined signal bindings.
      // Can be `left`, `right`, `top`, or `bottom` (default).
      controlsLocation: top
      // Can be `vertical` or `horizontal` (default).
      controlsDirection: vertical
      // If true, hides most of Vega and VegaLite warnings
      hideWarnings: true
      // Vega renderer to use: `svg` or `canvas` (default)
      renderer: canvas
    }
  }
  /* the rest of Vega code */
}

Vega and VegaLite

By default, Kibana Vega graphs will use autosize = { type: 'fit', contains: 'padding' } layout model for Vega and VegaLite graphs. The fit model uses all available space, ignores width and height values, but respects the padding values. You may override this behaviour by specifying a different autosize value.