---
title: "How to: Build a Bubble Chart"
slug: "use-case-building-a-bubble-chart"
description: "Learn how to create a bubble chart to visualize three data values, enhancing your analysis of leads, sales, and revenue in your applications."
updated: 2026-01-20T16:50:50Z
published: 2026-01-20T20:38:53Z
canonical: "docs.unqork.io/use-case-building-a-bubble-chart"
---

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

# How to: Build a Bubble Chart

A **bubble chart** is a variation of the scatter plot that lets you graph three values together as a single data point, offering several ways to display data in your applications.

Like a scatter plot, a bubble chart uses **x** and **y** values to display points on a graph. Unlike a scatter plot, each point on a bubble chart can be a different size. The size of each point is based on a third value in your data. This third variable provides more context in cases where these variables interact.

For example, a bubble chart could display:

- A country's unemployment rate on the x-axis.
- GDP growth percentage on the y-axis.
- Net GDP per capita is the size of each bubble.

Another use for a bubble chart is tracking sales for each agent in your department. You want to see if an agent makes more sales when they have more leads. You also want to see how much revenue comes from each of these circumstances. For that, you'll build a bubble chart.

You can set up the chart using the following keys from a data set:

- Number of leads
- Number of sales
- Revenue

## Configuration

Learn how to configure a bubble chart. Click on the tab that matches your Unqork platform:

UDesignerClassic Designer

### Configure the Data Table Component

First, you'll configure a [Data Table](/v1/docs/data-table-component) component with sample data that displays in your bubble chart.

1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the **Property ID** and **Label Text** fields, enter `dtSalesByAgent`.
3. In the data table, enter the following:

| leads | sales | revenue | agentId |
| --- | --- | --- | --- |
| 240 | 25 | 1000000 | 6635022 |
| 320 | 30 | 1500000 | 1953225 |
| 180 | 20 | 800000 | 3485878 |
| 500 | 35 | 900000 | 9728223 |
| 250 | 10 | 2000000 | 7782362 |
| 270 | 18 | 1700000 | 8155255 |
| 200 | 33 | 2300000 | 6687696 |
| 330 | 22 | 1200000 | 5169492 |

![Data table showing leads, sales, revenue, and agent IDs for various entries.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(804).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
4. Click **Save Component**.

### Configure the Hidden Component

Use a [Hidden](/v1/docs/hidden-component) component to store the output from the Data Workflow component you’ll set up next.

1. Drag and drop a **Hidden** component onto your canvas, placing it below your `dtSalesByAgent` **Data Table** component.
2. In the **Property ID** and **Label Text** fields, enter `salesForBubbleChart`.
3. Click **Save Component**.

### Configure the Data Workflow Component

Now, you'll configure your [Data Workflow](/v1/docs/data-workflow-component) component. Here, you'll use a [Pick](/v1/docs/pick-operator) operator to select three keys from your data. Then, you'll convert each of those fields to `x`, `y`, and `z` values. Your `x` and `y` values represent data points on each axis. The `z` values determine the size of each point. Your data must be formatted this way to pass to a [Chart](/v1/docs/chart-component) component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `dtSalesByAgent` **Data Table** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfScatterPlot`.

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | dtSalesByAgent |
| Required | Yes |
| Source | Default |

#### Configure the Pick Operator

This [Pick](/v1/docs/pick-operator) operator retrieves the leads and sales columns from your data table.

1. Drag and drop a **Pick** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Pick |
| Label | Leads, Sales, and Revenue |
| Pick Keys | leads, sales, revenue |
3. Connect the output port (right) of the `dtSalesByAgent` **Input** operator to the input port (left) of the `Leads, Sales, and Revenue` **Pick** operator.

#### Configure the First Console Operator

The first [Console](/v1/docs/console-operator) operator in this configuration displays the data retrieved by the [Pick](/v1/docs/pick-operator) operator in the DevTools Console.

1. Drag and drop a **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Picked Data |
3. Connect the output port (right) of the `Leads, Sales, and Revenue` **Pick** operator to the input port (left) of the `Picked Data` **Console** operator.

#### Configure the First Rename Field Operator

This [Rename Field](/v1/docs/rename-field-operator) operator renames your leads column to `x`. Doing so lets your leads data serve as the `x` values.

1. Drag and drop a **Rename Field** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Rename Field |
| Label | X-axis |
| Current Name | leads |
| Target Name | x |
3. Connect the output port (right) of the `Leads, Sales, and Revenue` **Pick** operator to the input port (left) of the `X-axis` **Rename Field** operator.

#### Configure the Second Rename Field Operator

This [Rename Field](/v1/docs/rename-field-operator) operator renames your sales column to `y`. Doing so lets your sales data serve as the `y` values.

1. Drag and drop another **Rename Field** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Rename Field |
| Label | Y-axis |
| Current Name | sales |
| Target Name | y |
3. Connect the output port (right) of the `X-axis` **Rename Field** operator to the input port (left) of the `Y-axis` **Rename Field** operator.

#### Configure the Third Rename Field Operator

This final [Rename Field](/v1/docs/rename-field-operator) operator renames your revenue column to `z`. Doing so lets your revenue data serve as the `z` values.

1. Drag and drop another **Rename Field** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Rename Field |
| Label | Z-axis |
| Current Name | revenue |
| Target Name | z |
3. Connect the output port (right) of the `Y-axis` **Rename Field** operator to the input port (left) of the `Z-axis` **Rename Field** operator.

#### Configure the Second Console Operator

This [Console](/v1/docs/console-operator) operator displays the data after being renamed by the Rename Field operators.

1. Drag and drop another **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Renamed Data |
3. Connect the output port (right) of the `Z-axis` **Rename Field** operator to the input port (left) of the `Renamed Data` **Console** operator.

#### Configure the Output Operator

The [Output](/v1/docs/output-operator) operator passes your final result to the [Hidden](/v1/docs/hidden-component) component you set up earlier.

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | salesForBubbleChart |
| Action | value |
3. Connect the output port (right) of the `Z-axis` **Rename Field** operator to the input port (left) of the `salesForBubbleChart` **Output** operator.

![Data workflow diagram showing input, processing, and output for a bubble chart.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(805).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
4. Click **Save Component**.

### Configure the Chart Component

Now it's time to configure your [Chart](/v1/docs/chart-component) component and determine which data to reference when populating your chart.

1. Drag and drop a **Chart** component onto your canvas, placing it below your `salesForBubbleChart` **Hidden** component.
2. In the **Property ID** field, enter `chartLeadsSalesRevenue`.
3. In the **Label Text** field, enter `Leads vs Sales vs Revenue`.
4. In the **Chart Title** field, enter `Leads vs Sales vs Revenue`.
5. In the **Inputs** table, enter the following:

| ID | Label | Chart Type | Categories | Values |
| --- | --- | --- | --- | --- |
| salesForBubbleChart |  | bubble |  | salesForBubbleChart |

![Chart configuration settings for leads, sales, and revenue data visualization.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(806).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
6. Navigate to the component’s **Advanced** settings.
7. From the **Series Axis Type** and **Value Axis Type** drop-downs, select **Linear**.
8. In the **Series Axis Label Text** field, enter `Leads`.
9. In the **Value Axis Label Text** field, enter `Sales`.

![Configuration options for chart axes, including series and value axis types and labels.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(809).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
10. Click **Save**.

### Configure the Initializer Component

Lastly, configure an [Initializer](/v1/docs/initializer-component) component to run your Data Workflow.

1. Drag and drop an **Initializer** component onto your canvas, placing it below your Data Table component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initBubbleChart`.
3. From the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| Property ID | Type | Value |
| --- | --- | --- |
| dwfBubbleChart | trigger | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(810).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
5. Click **Save Component**.
6. **Save** your module.

Here's how your completed module looks in the Module Builder:

![Data structure showing various bubble chart configurations and sales metrics for analysis.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(811).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)

Preview your module in Express View. You'll see the data from your data table displayed like a traditional scatter plot. Leads serve as the x-axis, and sales serve as the y-axis. But you'll notice that each point on the chart is a different size. This variation is due to the revenue values. If a point has a larger revenue value, its bubble is larger. And if a point's revenue is smaller, the bubble is smaller. This plot provides an added layer of data to analyze.

![Scatter plot showing leads, sales, and revenue with highlighted data point.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Charts_BubbleChart_Express.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)

### Configure the Data Table Component

First, you'll configure a [Data Table](/v1/docs/data-table-component) component with sample data that displays in your bubble chart.

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 `dtSalesByAgent`.
3. In the data table, enter the following:

| leads | sales | revenue | agentId |
| --- | --- | --- | --- |
| 240 | 25 | 1000000 | 6635022 |
| 320 | 30 | 1500000 | 1953225 |
| 180 | 20 | 800000 | 3485878 |
| 500 | 35 | 900000 | 9728223 |
| 250 | 10 | 2000000 | 7782362 |
| 270 | 18 | 1700000 | 8155255 |
| 200 | 33 | 2300000 | 6687696 |
| 330 | 22 | 1200000 | 5169492 |

![Data table displaying leads, sales, revenue, and agent IDs for analysis.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(812).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
4. Click **Save**.

### Configure the Hidden Component

Use a [Hidden](/v1/docs/hidden-component) component to store the output from the Data Workflow component you’ll set up next.

1. Drag and drop a **Hidden** component onto your canvas, placing it below your `dtSalesByAgent` **Data Table** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `salesForBubbleChart`.
3. Click **Save**.

### Configure the Data Workflow Component

Now, you'll configure your [Data Workflow](/v1/docs/data-workflow-component) component. Here, you'll use a [Pick](/v1/docs/pick-operator) operator to select three keys from your data. Then, you'll convert each of those fields to `x`, `y`, and `z` values. Your `x` and `y` values represent data points on each axis. The `z` values determine the size of each point. Your data must be formatted this way to pass to a [Chart](/v1/docs/chart-component) component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `dtSalesByAgent` **Data Table** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfScatterPlot`.

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | dtSalesByAgent |
| Required | Yes |
| Source | Default |

#### Configure the Pick Operator

This [Pick](/v1/docs/pick-operator) operator retrieves the leads and sales columns from your data table.

1. Drag and drop a **Pick** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Pick |
| Label | Leads, Sales, and Revenue |
| Pick Keys | leads, sales, revenue |
3. Connect the output port (right) of the `dtSalesByAgent` **Input** operator to the input port (left) of the `Leads, Sales, and Revenue` **Pick** operator.

#### Configure the First Console Operator

The first [Console](/v1/docs/console-operator) operator in this configuration displays the data retrieved by the [Pick](/v1/docs/pick-operator) operator in the DevTools Console.

1. Drag and drop a **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Picked Data |
3. Connect the output port (right) of the `Leads, Sales, and Revenue` **Pick** operator to the input port (left) of the `Picked Data` **Console** operator.

#### Configure the First Rename Field Operator

This [Rename Field](/v1/docs/rename-field-operator) operator renames your leads column to `x`. Doing so lets your leads data serve as the `x` values.

1. Drag and drop a **Rename Field** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Rename Field |
| Label | X-axis |
| Current Name | leads |
| Target Name | x |
3. Connect the output port (right) of the `Leads, Sales, and Revenue` **Pick** operator to the input port (left) of the `X-axis` **Rename Field** operator.

#### Configure the Second Rename Field Operator

This [Rename Field](/v1/docs/rename-field-operator) operator renames your sales column to `y`. Doing so lets your sales data serve as the `y` values.

1. Drag and drop another **Rename Field** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Rename Field |
| Label | Y-axis |
| Current Name | sales |
| Target Name | y |
3. Connect the output port (right) of the `X-axis` **Rename Field** operator to the input port (left) of the `Y-axis` **Rename Field** operator.

#### Configure the Third Rename Field Operator

This final [Rename Field](/v1/docs/rename-field-operator) operator renames your revenue column to `z`. Doing so lets your revenue data serve as the `z` values.

1. Drag and drop another **Rename Field** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Rename Field |
| Label | Z-axis |
| Current Name | revenue |
| Target Name | z |
3. Connect the output port (right) of the `Y-axis` **Rename Field** operator to the input port (left) of the `Z-axis` **Rename Field** operator.

#### Configure the Second Console Operator

This [Console](/v1/docs/console-operator) operator displays the data after being renamed by the Rename Field operators.

1. Drag and drop another **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Renamed Data |
3. Connect the output port (right) of the `Z-axis` **Rename Field** operator to the input port (left) of the `Renamed Data` **Console** operator.

#### Configure the Output Operator

The [Output](/v1/docs/output-operator) operator passes your final result to the [Hidden](/v1/docs/hidden-component) component you set up earlier.

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | salesForBubbleChart |
| Action | value |
3. Connect the output port (right) of the `Z-axis` **Rename Field** operator to the input port (left) of the `salesForBubbleChart` **Output** operator.

![Data workflow diagram showing input, processing, and output steps for bubble chart.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Charts_BubbleChart_Dwf.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
4. Click **Save**.

### Configure the Chart Component

Now it's time to configure your [Chart](/v1/docs/chart-component) component and determine which data to reference when populating your chart.

1. Drag and drop a **Chart** component onto your canvas, placing it below your `salesForBubbleChart` **Hidden** component.
2. In the **Label** field, enter `Leads vs Sales vs Revenue`.
3. In the **Property Name** field, enter `chartLeadsSalesRevenue`.
4. In the **Chart Title** field, enter `Leads vs Sales vs Revenue`.
5. In the **Inputs** table, enter the following:

| ID | Label | Chart Type | Categories | Values |
| --- | --- | --- | --- | --- |
| salesForBubbleChart |  | bubble |  | salesForBubbleChart |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(844).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
6. Click the **Formatting** tab at the top of the configuration window.
7. In the **Series Axis Label Text** field, enter `Leads`.
8. In the **Value Axis Label Text** field, enter `Sales`.
9. From the **Series Axis Type** and **Value Axis Type** drop-down, select **Linear**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(808).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
10. Click **Save**.

### Configure the Initializer Component

Lastly, configure an [Initializer component](/v1/docs/initializer-component) to run your Data Workflow.

1. Drag and drop an **Initializer** component onto your canvas, placing it below your Data Table component.
2. In the **Property ID** and **Canvas Label Text** fields, enter initBubbleChart.
3. From the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| Property ID | Type | Value |
| --- | --- | --- |
| dwfBubbleChart | trigger | GO |

![Display settings for a bubble chart initializer with trigger type and outputs.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(803).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
5. Click **Save**.
6. **Save** your module.

Here's how your completed module looks in the Module Builder:

![Module editor displaying components for bubble chart and sales data visualization.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Charts_BubbleChart_ME.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)

Preview your module in Express View. You'll see the data from your data table displayed like a traditional scatter plot. Leads serve as the x-axis, and sales serve as the y-axis. But you'll notice that each point on the chart is a different size. This variation is due to the revenue values. If a point has a larger revenue value, its bubble is larger. And if a point's revenue is smaller, the bubble is smaller. This plot provides an added layer of data to analyze.

![Scatter plot showing leads, sales, and revenue with highlighted data point.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Charts_BubbleChart_Express.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)

The DevTools Console helps you securely store, build, test, and deploy your software.

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.