---
title: "Vega Chart Component"
slug: "vega-chart-component"
updated: 2025-12-04T19:38:10Z
published: 2025-12-04T19:38:10Z
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

UDesignerClassic Designer

The **Vega Chart component** is a component that creates a graphical display of data sets in an [application](/v1/docs/introduction-to-unqork-applications). In the Module Builder, Creators configure the Vega Chart component using one or more chart types and data sets. In Express View, the Vega Chart lets end-users visualize the data sets in a meaningful and intuitive way.

> [!WARNING]
> The Vega Chart component is a Vega (2.0) runtime component and is not supported in the runtime.

Below are some common examples of when to use the Vega Chart component:

- To display a scatter plot to track the number of sales for each agent in your department.
- To display a pie chart to show the percentages of end-user submission.
- To display a bar graph that shows product consumption by demographic.

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display

| Setting | Description |
| --- | --- |
| **Input Behavior** | Controls how end-users interact with the component. Choose from the following options:**Enable User Input**: Allow end-users to view and enter data in this field.**Disable User Input**: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a **prohibited** symbol.**Read Only - Legacy**: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None. |
| **Title** | Displays as a header above the chart in Express View. |
| **Subtitle** | Enter a value to display as a sub-header below the Title value in Express View. |
| **Accessible Label** | read this value to end-users in Express View. This value corresponds to the aria-label in the DOM. |
| **X Axis Title** | Displays next to the chart's horizontal axis. In Express View, this value displays below the chart's graphics. |
| **Y Axis Title** | Displays next to the chart's vertical axis. In Express View, this value displays to the left the chart's graphics. |
| **Hidden** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D) **(ON)** to hide the chart in Express View. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D) **(OFF)**. |
| **Hide Legend** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D) **(ON)** to hide the chart's key values in Express View. |
| **Vertical Alignment** | Select the vertical alignment location for the legend element. Values include: - **Top**: Displays the key values above the chart graphics. - **Middle**: Displays keys values in the vertical-middle of the chart graphics. - **Bottom**: Displays the key values below the chart graphics. |
| **Alignment** | Select the horizontal alignment for the legend element. Values include: - **Left**: Displays the key values to the left of the chart graphics. - **Middle**: Displays keys values in the horizontal-middle of the chart graphics. - **Right**: Displays the key values to the right of the chart graphics. |

[![A static image displaying the Vega Chart's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display1_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display1(2).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)

### Series

[![A static image displaying the Vega Chart's Series settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display2_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display2(2).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)

The Series table lets you overlay multiple data sets onto a single graph. Each row in the table represents a single data set.

| Setting | Description |
| --- | --- |
| **ID** | Enter a reference ID to target the row's chart data. |
| **Type** | This field lets you set the chart type to display your data. Below are the available chart types: - **Area**: Best used to visualize trends over time, specifically to highlight the magnitude of change and compare multiple data series. - **Bar**: Effective for comparison of at least one data point. Bar charts show data as a bar with the height of the bar proportional to the values being plotted. Typically, a bar chart plots the variable value horizontally, and the fixed dimension vertically. - **Column**: Effective for comparison of at least one data point. Column charts show data as a rectangle with the height of the rectangle proportional to the values being plotted. Typically, a column chart plots the variable value vertically, and the fixed dimension horizontally. - **Line**: A line chart displays information as a series of data points connected by straight line segments. These charts are typically used to show information that changes over time. - **Pie**: A pie chart is a circular-type chart, divided into slices to show numeric proportion. In a pie chart, the arc length of each slice relates to the quantity the slice represents. When used in conjunction with the Inner Size setting, you can make your pie chart into a doughnut chart. - **Scatter**: A scatter chart uses dots to represent values for two different variables. The position of each dot in the horizontal and vertical axis shows values for the data point. You'll typically use these charts to show relationships between variables. |
| **Label** | This value represents the data set's title in the legend. For example, if your graph displays a count of numbers, enter `Number`. If you're displaying a percentage of businesses involved in an industry, enter `Businesses`. |
| **Reference Key** | Enter the Property ID of the data source. An example data source could be a [Data Table](/v1/docs/data-table-component) component containing the x and y values. |
| **Reference Property** | Enter the component state property value to reference. |
| **X Property** | Enter the x-property column value contained in the Reference Key. For example, if your Data Table component has a column labeled x that represents x-axis data, then enter x. |
| **Y Property** | Enter the y-property column value contained in the Reference Key. For example, if your Data Table component has a column labeled y that represents y-axis data, then enter y. |
| **Color** | Manipulates the color of an input category if the input data array contains colors. Your color data can be in word or HEX form. For example, this text is colored using the following hex: #fb7e14. |
| **Stack Group** | Stack or separate data sets based on chart type. For example, if two data sets use the Bar chart type, labeling data set one as A and data set two as B displays each data set as a bar in the graph. Labeling data set one and two as A stacks the bars in the graph. |

## Adding a Vega Chart Component

While the Vega Chart component provides thousands of possible data set combinations and displays, the example below details a pet availability chart for a pet store. You'll create two data tables, one for available pets, and the other for pets that have been reserved. Then, you'll use a Vega Chart component to visualize the data.

### Configure the dtAvailablePets Data Table Component

The first [Data Table](/v1/docs/data-table-component) component contains a list of pet types and the total available pets for each type.

1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the Property ID and field, enter **dtAvailablePets**.
3. In the **Data Table**, enter the following:

|  | A | B |
| --- | --- | --- |
| 1 | type | total |
| 2 | Cat | 5 |
| 3 | Dog | 8 |
| 4 | Bird | 2 |
| 5 | Fish | 20 |

> [!NOTE]
> In a Data Table component, the first row acts as headers for the data set.

[![A static image displaying the completed configuration of the Data Table component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ud_dtAvailablePets_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ud%20dtAvailablePets.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)
4. Click **Save Component**.

### Configure the dtReservedPets Data Table Component

The second [Data Table](/v1/docs/data-table-component) component contains the total reserved pets for each pet type.

1. Drag and drop a **Data Table** component onto your canvas, placing it below the **dtAvailablePets** **Data Table** component.
2. In the Property ID field, enter **dtReservedPets**.
3. In the **Data Table**, enter the following:

|  | A | B |
| --- | --- | --- |
| 1 | type | total |
| 2 | Cat | 3 |
| 3 | Dog | 4 |
| 4 | Bird | 0 |
| 5 | Fish | 5 |

[![A static image displaying the completed configuration of the Data Table component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ud_dtReservedPets_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ud%20dtReservedPets.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)
4. Click **Save Component**.

### Configure the Vega Chart Component

Configure a Vega Chart to display the **dtAvailablePets** and **dtReservedPets** data. Add labels to describe each axis, and stack the data sets on top of each other using the **Stack Group** column.

1. Drag and drop a **V****ega Chart** component onto the canvas, placing it above the **dtAvailablePets** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(12).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)Data Table** component.
2. In the Property ID field, enter **displayChart**.
3. In the **Title** field, enter `Pet Store - Pet Availability`.
4. In the **Subtitle** field, enter `Total, Available, and Reserved`.
5. In the **X Axis Title** field, enter `Pet Type`.
6. In the **Y Axis Title** field, enter `Total Pet Stock`.

[![A static image displaying the Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ud_displayChart1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ud%20displayChart1.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)
7. In the **Series** table, enter the following:

|  | ID | Type | Label | Reference Key | Reference Property | X Property | Y Property | Color | Stack Group |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 1 | series1 | Bar | Available Pets | dtAvailablePets | value | type | total |  | A |
| 2 | series2 | Bar | Reserved Pets | dtReservedPets | value | type | total |  | A |

> [!NOTE]
> The **Stack Group** column places data sets on top of each other if they are the same type. In this example, the **dtAvailabePets** and **dtReservedPets** data is stacked on top of each other.
8. Click **Save Component**.
9. **Save** your module.

Preview your module in Express View. The Vega Chart displays the two data sets as a bar graph. Each bar is split into two colors, representing the **dtAvailabePets** and **dtReservedPets** values.

[![A static image displaying the Vega Chart in Express View](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example_ExpressView_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example%20ExpressView(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)

The **Vega Chart component** is a component that creates a graphical display of data sets in an [application](/v1/docs/introduction-to-unqork-applications). In the Module Builder, Creators configure the Vega Chart component using one or more chart types and data sets. In Express View, the Vega Chart lets end-users visualize the data sets in a meaningful and intuitive way.

> [!WARNING]
> The Vega Chart component is a Vega (2.0) runtime component and is not supported in the runtime.

Below are some common examples of when to use the Vega Chart component:

- To display a scatter plot to track the number of sales for each sales agent in your department.
- To display a pie chart to show the percentages of end-user submissions.
- To display a bar graph that shows product consumption by demographic.

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display

[![A static image displaying the Vega Chart's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Display_Settings_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Display%20Settings(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)

### General

General settings control titles, labels, and the visibility of the Vega Chart component.

| Setting | Description |
| --- | --- |
| **Title** | Displays as a header above the chart in Express View. |
| **Subtitle** | Enter a value to display as a sub-header below the Title value in Express View. |
| **Accessible Label** | Screen readers read this value to end-users in Express View. This value corresponds to the aria-label in the DOM. |
| **X Axis Title** | Displays next to the chart's horizontal axis. In Express View, this value displays below the chart's graphics. |
| **Y Axis Title** | Displays next to the chart's vertical axis. In Express View, this value displays to the left the chart's graphics. |
| Hidden | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D) **(ON)** to hide the chart in Express View. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D) **(OFF)****.** |

### Legend

Legend settings control the display and location of the key values.

| Setting | Description |
| --- | --- |
| Hide Legend | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D) **(ON)** to hide the chart's key values in Express View. |
| **Vertical Alignment** | Select the vertical alignment location for the legend element. Values include: - **Top**: Displays the key values above the chart graphics. - **Middle**: Displays keys values in the vertical-middle of the chart graphics. - **Bottom**: Displays the key values below the chart graphics. |
| **Alignment** | Select the horizontal alignment for the legend element. Values include: - **Left**: Displays the key values to the left of the chart graphics. - **Middle**: Displays keys values in the horizontal-middle of the chart graphics. - **Right**: Displays the key values to the right of the chart graphics. |

## Series

[![A static image displaying the Vega Chart's Series settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Series_Settings_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Series%20Settings.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)

The Series table lets you overlay multiple data sets onto a single graph. Each row in the table represents a single data set.

| Setting | Description |
| --- | --- |
| **ID** | Enter a reference ID to target the row's chart data. |
| **Type** | This field lets you set the chart type to display your data. Below are the available chart types: - **Area**: Best used to visualize trends over time, specifically to highlight the magnitude of change and compare multiple data series. - **Bar**: Effective for comparison of at least one data point. Bar charts show data as a bar with the height of the bar proportional to the values being plotted. Typically, a bar chart plots the variable value horizontally, and the fixed dimension vertically. - **Column**: Effective for comparison of at least one data point. Column charts show data as a rectangle with the height of the rectangle proportional to the values being plotted. Typically, a column chart plots the variable value vertically, and the fixed dimension horizontally. - **Line**: A line chart displays information as a series of data points connected by straight line segments. These charts are typically used to show information that changes over time. - **Pie**: A pie chart is a circular-type chart, divided into slices to show numeric proportion. In a pie chart, the arc length of each slice relates to the quantity the slice represents. When used in conjunction with the Inner Size setting, you can make your pie chart into a doughnut chart. - **Scatter**: A scatter chart uses dots to represent values for two different variables. The position of each dot in the horizontal and vertical axis shows values for the data point. You'll typically use these charts to show relationships between variables. |
| **Label** | This value represents the data set's title in the legend. For example, if your graph displays a count of numbers, enter `Number`. If you're displaying a percentage of businesses involved in an industry, enter `Businesses`. |
| **Reference Key** | Enter the Property ID of the data source. An example data source could be a [Data Table](/v1/docs/data-table-component) component containing the x and y values. |
| **Reference Properties** | Enter the component state property value to reference. |
| **X Property** | Enter the x-property column value contained in the Reference Key. For example, if your Data Table component has a column labeled x that represents x-axis data, then enter x. |
| **Y Property** | Enter the y-property column value contained in the Reference Key. For example, if your Data Table component has a column labeled y that represents y-axis data, then enter y. |
| **Color** | Manipulates the color of an input category if the input data array contains colors. Your color data can be in word or HEX form. For example, this text is colored using the following hex: #fb7e14. |
| **Stack Group** | Stack or separate data sets based on chart type. For example, if two data sets use the Bar chart type, labeling data set one as A and data set two as B displays each data set as a bar in the graph. Labeling data set one and two as A stacks the bars in the graph. |

## Adding a Vega Chart Component

While the Vega Chart component provides thousands of possible data set combinations and displays, the example below details a pet availability chart for a pet store. You'll create two data tables, one for available pets, and the other for pets that have been reserved. Then, you'll use a Vega Chart component to visualize the data.

### Configure the dtAvailablePets Data Table Component

The first [Data Table](/v1/docs/data-table-component) component contains a list of pet types and the total available pets for each type.

1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the Property ID and Canvas Label Text fields, enter `dtAvailablePets`.
3. In the component's configuration menu, click **D****ata**.
4. In the **Data Table**, enter the following:

|  | A | B |
| --- | --- | --- |
| 1 | type | total |
| 2 | Cat | 5 |
| 3 | Dog | 8 |
| 4 | Bird | 2 |
| 5 | Fish | 20 |

> [!NOTE]
> In a Data Table component, the first row acts as headers for the data set.

[![A static image displaying the completed configuration of the Data Table component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example_dtAvailablePets_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example%20dtAvailablePets.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)
5. Click **Save & Close**.

### Configure the dtReservedPets Data Table Component

The second [Data Table](/v1/docs/data-table-component) component contains the total reserved pets for each pet type.

1. Drag and drop a **Data Table** component onto your canvas, placing it below the **dtAvailablePets** **Data Table** component.
2. In the Property ID and Canvas Label Text fields, enter `dtReservedPets`.
3. In the component's configuration menu, click **D****ata**.
4. In the **Data Table**, enter the following:

|  | A | B |
| --- | --- | --- |
| 1 | type | total |
| 2 | Cat | 3 |
| 3 | Dog | 4 |
| 4 | Bird | 0 |
| 5 | Fish | 5 |

> [!NOTE]
> In a Data Table component, the first row acts as headers for the data set.

[![A static image displaying the completed configuration of the Data Table component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example_dtReservedPets_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example%20dtReservedPets.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)
5. Click **Save & Close**.

### Configure the Vega Chart Component

Configure a Vega Chart to display the **dtAvailablePets** and **dtReservedPets** data. Add labels to describe each axis, and stack the data sets on top of each other using the **Stack Group** column.

1. Drag and drop a **V****ega Chart** component onto the canvas, placing it above the **dtAvailablePets** **Data Table** component.
2. In the Property ID field, enter **displayChart**.
3. In the **Title** field, enter `Pet Store - Pet Availability`.
4. In the **Subtitle** field, enter `Total, Available, and Reserved`.
5. In the **X Axis Title** field, enter `Pet Type`.
6. In the **Y Axis Title** field, enter `Total Pet Stock`.

[![A static image displaying the Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example_vegaChartDisplay_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example%20vegaChartDisplay.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)
7. In the component's configuration menu, click **Series**.
8. In the **Series** table, enter the following:

|  | ID | Type | Label | Reference Key | Reference Property | X Property | Y Property | Color | Stack Group |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 1 | series1 | Bar | Available Pets | dtAvailablePets | value | type | total |  | A |
| 2 | series2 | Bar | Reserved Pets | dtReservedPets | value | type | total |  | A |

> [!NOTE]
> The **Stack Group** column places data sets on top of each other if they are the same type. In this example, the **dtAvailabePets** and **dtReservedPets** data is stacked on top of each other.
9. Click **Save & Close**.
10. **Save** your module.

Preview your module in Express View. The Vega Chart displays the two data sets as a bar graph. Each bar is split into two colors, representing the **dtAvailabePets** and **dtReservedPets** values. [![A static image displaying the Vega Chart in Express View](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example_ExpressView_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example%20ExpressView(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)

## Structure of a Vega Chart Component's Data

Using the example above, the image below displays a Vega Chart's component state:

[![A static image displaying the Vega Chart's component state.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataStructure_componentState_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataStructure%20componentState.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)

To view the Vega Chart component's data sets, expand the series array. Each value in the array contains one data set:

[![A static image displaying the Vega Chart's series array.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataStructure_dataSetValues_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataStructure%20dataSetValues.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A13Z&se=2026-11-09T04%3A51%3A13Z&sr=c&sp=r&sig=xGTp51wQG1L8ohXL1nFpuP0WcTP6szU8PVlB0%2FcwvSQ%3D)

## Resources

- [Modify the Vega Chart component using the toolbar settings](/v1/docs/component-toolbar-settings).
- [Data Table Component](/v1/docs/data-table-component).
- [Data Workflow Component](/v1/docs/data-workflow-component).
- [How to configure a bubble chart](/v1/docs/use-case-building-a-bubble-chart).
- [How to configure a scatter plot](/v1/docs/use-case-building-a-scatter-plot).
- [Get help in the Community Hub](https://community.unqork.com/search?q=chart).

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

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.

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.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

The Document Object Model (DOM) is the data representation of objects that form the structure and content of a document on the web. The DOM represents the page.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .