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