Vega Chart Component

The Vega Chart component requires the Vega (2.0) runtime. Set the module or Panel component runtime to Vega (2.0) before adding this component.

The Vega Chart component renders module data as a configurable chart. Use it to visualize data as bar, column, line, pie, or spline charts. Each series is configured with its own chart type, data source, and optional color.

How to read settings tables
The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

General Settings

Setting	Field	Type	Default	Description
Property ID	`key`	Text input	`vegaChart`	A unique ID for this component instance. Used to reference the component in logic and submission data.

Display Settings

Field Text

Setting	Field	Type	Description
Title	`field.title.text`	Text input	A title displayed above the chart.
Subtitle	`field.subtitle.text`	Text input	A subtitle displayed below the title.
Accessible Label	`field.ariaLabel`	Text input	An ARIA label for screen readers.
X Axis Title	`field.xAxis.title.text`	Text input	A label displayed along the X axis.
Y Axis Title	`field.yAxis.title.text`	Text input	A label displayed along the Y axis.

Default State Options

Setting	Field	Type	Default	Description
Hidden	`display.hidden`	Toggle	OFF	When set to ON, hides the component from end-users. The component still loads and executes logic.

Legend

Setting	Field	Type	Default	Description
Hide Legend	`field.legend.hidden`	Toggle	OFF	When set to ON, hides the chart legend.
Vertical Alignment	`field.legend.verticalAlignment`	Drop-down	Bottom	Controls the vertical position of the legend. Options include: Top, Middle, Bottom.
Alignment	`field.legend.alignment`	Drop-down	Center	Controls the horizontal alignment of the legend. Options include: Left, Center, Right.

Series

Each series defines one set of data to plot on the chart. Add multiple series to overlay or group data on the same chart area. Series are configured in a spreadsheet-style table in the component settings panel.

The Vega Chart component reads data from other components in the module. Use Reference Key to point to the component supplying the data, and Reference Property to specify which property on that component to read. X Property and Y Property then map sub-properties of that data to the chart axes.

Action	Description
Copy Table	Copies the current Series configuration to the clipboard.
Replace Table	Replaces the current Series configuration with a copied one.
Filter	Filters the rows displayed in the Series table.
Add Series	Adds a new series row to the table.

Setting	Field	Type	Description
ID	`series[].id`	Text input	A unique identifier for this series.
Type	`series[].type`	Drop-down	The chart type for this series. Options include: bar, column, line, pie, spline.
Label	`series[].label`	Text input	The display label for this series in the chart legend.
Reference Key	`series[].refreshTarget.target`	Drop-down	The Property ID of the component that supplies data for this series.
Reference Property	`series[].refreshTarget.property`	Text input	The property on the referenced component to read as the data source.
X Property	`series[].refreshTarget.propertyMap.x`	Text input	The sub-property of the referenced data to use as the X axis (category) value.
Y Property	`series[].refreshTarget.propertyMap.y`	Text input	The sub-property of the referenced data to use as the Y axis (numeric) value.
Color	`series[].color`	Text input	An optional hex color override for this series, like `#3B82F6`.
Stack Group	`series[].stackGroup`	Text input	Groups series into a stacked display. Series sharing the same Stack Group value stack on top of each other.
… (more options)	—	—	Row-level actions available when more than two rows are present: Move Up, Move Down, Copy Row, Paste Row Above, Paste Row Below, Insert Above, Insert Below, Delete Row.

Accessibility

Accessibility Options

Setting	Field	Type	Description
Caption	`field.caption.text`	Text input	A caption displayed below the chart.
X Axis Description	`field.xAxis.description.text`	Text input	Additional description text for the X axis.
Y Axis Description	`field.yAxis.description.text`	Text input	Additional description text for the Y axis.

Changelog

Date	Change
2026-06-15	Initial draft.