Useful Linksedit

Vega Editoredit

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 resourcesedit

Using Vega and Vega-Lite examplesedit

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.

Additional configuration optionsedit

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 positioningedit

Vega and Vega-Liteedit

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 mapedit

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