Skip to main content

Vega Chart widget

Charting widget based on Vega declarative visualization language.


spec JSON - The chart configuration as Vega JSON.

signals JSON - Dynamic variables that drive interactive updates.

data Array - The data for chart.


signals Object - The output dynamic variables and selections.


Vega Chart widget can render a wide variety of data visualizations. The visualizations are configurable using Vega JSON specification. To create a visualization, pass Vega specification to spec input and then connect your data source to the data input.

Vega specification supports data embedded into the specification itself. If you pass the configuration that includes the data in the spec, then leave the data input free. Otherwise the data in the spec will be overwritten.

Vega Chart also supports Vega signals - the dynamic variables that drive interactive updates. You need to explicitly specify which signals Vega Chart will be listening to in widget Settings dialog. You can set/update signal value by sending signal value event to signals input.

{    "data": 3.14,    "meta": {        "type": "KELP_CHART_SIGNAL",        "name": "metric"    }}

Any change of the value for configured signals will trigger an event on signals output.


Vega signals are different from Kelp signals. For clarity, consider Vega signals as dynamic variables inside Vega Chart.

The following is an example of a simple bar chart Vega spec.

Vega bar chart spec
{    "$schema": "",    "data": [        {            "name": "table",            "values": [                {                    "category": "A",                    "amount": 28                },                {                    "category": "B",                    "amount": 5                },                {                    "category": "C",                    "amount": 43                }            ]        }    ],    "scales": [        {            "name": "xscale",            "type": "band",            "domain": {                "data": "table",                "field": "category"            },            "range": "width",            "padding": 0.05,            "round": true        },        {            "name": "yscale",            "domain": {                "data": "table",                "field": "amount"            },            "nice": true,            "range": "height"        }    ],    "axes": [        {            "orient": "bottom",            "scale": "xscale"        },        {            "orient": "left",            "scale": "yscale"        }    ],    "marks": [        {            "type": "rect",            "from": {                "data": "table"            },            "encode": {                "enter": {                    "x": {                        "scale": "xscale",                        "field": "category"                    },                    "width": {                        "scale": "xscale",                        "band": 1                    },                    "y": {                        "scale": "yscale",                        "field": "amount"                    },                    "y2": {                        "scale": "yscale",                        "value": 0                    }                },                "update": {                    "fill": {                        "value": "steelblue"                    },                    "stroke": {                        "value": "none"                    }                }            }        }    ]}



The title of the widget.


Declare signals that Vega Chart widget will be listening too. It includes both input and output signals. Click on "+" to add one or more signals.

Hide progress bar#

Controls the visibility of widget progress bar. By default, widget progress bar is visible.

Hide help icon#

Controls the visibility of help icon. By default, help icon is visible.


Learn More#