Note: 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 Unqork IDE. 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 .
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.
The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.
The browser-based workspace where Creators build, edit, review, and manage Unqork applications. Also referred to as the Unqork platform. The IDE replaces what was previously referred to as UDesigner and Classic Designer, which are considered legacy.
A Property ID is the unique field ID used by Unqork to track and link components in your module.
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.
ARIA (Accessible Rich Internet Applications) is a set of attributes used in HTML to enhance the accessibility of web content, particularly dynamic or interactive web pages, for users who rely on assistive technologies like screen readers.
A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.