Useful Links

Vega Editor

The Vega Editor includes examples for Vega & Vega-Lite, but does not support any Kibana-specific features like Elasticsearch requests and interactive base maps.

Vega-Lite resources

Vega resources

Using Vega and Vega-Lite examples

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.

Additional configuration options

These options are specific to the Kibana. Map support has additional configuration options.

{
  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 */
}

Sizing and positioning

Vega and Vega-Lite

By default, Kibana Vega graphs will use autosize = { type: 'fit', contains: 'padding' } layout model for Vega and Vega-Lite 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.

Vega on a map

All Vega graphs will ignore autosize, width, height, and padding values, using fit model with zero padding.