NOTE: You are looking at documentation for an older release. For the latest information, see the current release documentation.
Useful Links
editUseful Links
editVega Editor
editThe Vega Editor includes examples for Vega & Vega-Lite, but does not support any Kibana-specific features like Elasticsearch requests and interactive base maps.
Elastic blog posts
editUsing Vega and Vega-Lite examples
editWhen 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 options
editThese 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
editVega and Vega-Lite
editBy 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
editAll Vega graphs will ignore autosize
, width
, height
, and padding
values, using fit
model with zero padding.