---
title: "Vega Chart Component"
slug: "vega-chart-component"
tags: ["module-builder", "vega", "module-builder-components"]
updated: 2026-09-15T18:20:08Z
published: 2026-09-15T18:20:08Z
canonical: "docs.unqork.io/vega-chart-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Vega Chart Component

> [!NOTE]
> The Vega Chart component requires the [Vega (2.0) runtime](/unqorkai/docs/centauri-and-vega-runtimes). 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. |

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

Rendering is the process of loading components and displaying the final result on the front-end screen.

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.

Assistive technology that reads digital text aloud for users with visual impairments or reading disabilities.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A JavaScript property is a member of an object that associates a key with a value. A JavaScript object is a data structure that stores a collection of properties.

A place on your operating system that stores recently copied content. The clipboard only stores one item at a time.