---
title: "Chart Component"
slug: "chart-component"
tags: ["module-builder", "module-builder-components"]
updated: 2026-09-15T17:33:49Z
published: 2026-09-15T17:33:49Z
canonical: "docs.unqork.io/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.

# Chart Component

The Chart component renders module data as a configurable chart. Use it to visualize data as bar, line, pie, bubble, donut, and other chart types. Each data series is configured in the Inputs table with its chart type, category labels, and numeric values.

> **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 | `chart` | A unique ID for this component instance. |

## Display Settings

### Field Text

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Label Text | `label` | Text input | — | Identifies the component on the canvas. |

### Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Chart Title | `chartData.chartTitle` | Text input | — | A title displayed inside the chart. |
| Chart Subtitle | `chartData.chartSubtitle` | Text input | — | A subtitle displayed below the chart title. |
| Chart Height (in px) | `chartData.height` | Number input | `300` | The chart's pixel height. |
| Print Chart Label | `printChartLabel` | Text input | `Print chart` | The label for the print chart action in the chart context menu. |
| Download CSV Label | `downloadCSVLabel` | Text input | `Download CSV` | The label for the CSV download action. |
| Download XLS Label | `downloadXLSLabel` | Text input | `Download XLS` | The label for the Excel download action. |
| Download PDF Label | `downloadPDFLabel` | Text input | `Download PDF Document` | The label for the PDF download action. |

## Data Settings

### Series Configuration

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Stack Series | `chartData.stackSeries` | Toggle | OFF | Stacks each data series on top of the previous one instead of displaying them side by side. |

### Inputs

Defines each data series to plot on the chart.

| Action | Description |
| --- | --- |
| **Copy Table** | Copies the current Inputs configuration to the clipboard. |
| **Replace Table** | Replaces the current Inputs configuration with a copied one. |
| **Filter Field** | Filters the rows displayed in the table. |
| **Add Input** | Adds a new data series row to the table. |

| Column | Field | Description |
| --- | --- | --- |
| ID | `id` | The component whose data populates this series. Select from the components available in the module. |
| Label | `seriesLabel` | The display label for this series in the chart legend. |
| Chart Type | `chartType` | The chart type for this series (for example, bar, line, pie). |
| Categories | `seriesCategories` | The Property ID of the field providing category labels for the x-axis. |
| Values | `seriesValues` | The Property ID of the field providing numeric values for this series. |
| Colors | `seriesColors` | The Property ID of the field providing custom colors for data points. |
| Size | `seriesSize` | The Property ID of the field providing size values (for bubble charts). |
| Inner Size | `seriesInnerSize` | The Property ID of the field providing inner size values (for donut charts). |

### Event Outputs

Defines module fields populated when an end-user interacts with a chart element (for example, clicking a data point to filter).

| Action | Description |
| --- | --- |
| **Copy Table** | Copies the current Event Outputs configuration to the clipboard. |
| **Replace Table** | Replaces the current Event Outputs configuration with a copied one. |
| **Filter Field** | Filters the rows displayed in the table. |
| **Add Event Output** | Adds a new output row to the table. |

| Column | Field | Description |
| --- | --- | --- |
| ID | `id` | The component to populate with the selected data value. Select from the components available in the module. |
| Filter Category | `filterCategory` | The category used for filtering when a chart element is selected. |

## Advanced Settings

### Additional Display Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Chart Theme | `chartData.chartTheme` | Drop-down | **Default** | The chart's color theme. Options include: **Default** and **Ultramarine**. |
| Override Series Colors | `chartData.seriesColor` | Text input | — | Overrides the default series colors with a custom hex value (for example, `#ff7200`). |

### Axes Configuration

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Series Axis Type | `chartData.xAxisType` | Drop-down | **Category** | The x-axis scale type. Options include: **Category**, **Linear**, **Logarithmic**, and **Datetime**. |
| Series Axis Label Text | `chartData.xAxisLabel` | Text input | — | Label displayed on the x-axis. |
| Reverse Series Axis | `chartData.xAxisReversed` | Toggle | OFF | Reverses the x-axis (series axis) from large to small. |
| Value Axis Type | `chartData.yAxisType` | Drop-down | **Linear** | The y-axis scale type. Options include: **Category**, **Linear**, **Logarithmic**, and **Datetime**. |
| Value Axis Label Text | `chartData.yAxisLabel` | Text input | — | Label displayed on the y-axis. |
| Secondary Value Axis Label Text | `chartData.yAxisLabel2` | Text input | — | Label for a secondary y-axis when two series are plotted. |
| Value Axis Maximum | `chartData.yAxisMax` | Text input | — | Sets a fixed maximum value for the y-axis. |
| Reverse Value Axis | `chartData.yAxisReversed` | Toggle | OFF | Reverses the y-axis (value axis) from large to small. |

### Label Configuration

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Series Label Format | `chartData.labelFormat` | Text input | `{point.y:,.0f}` | Highcharts format string for data point labels. |
| Tooltip Format | `chartData.tooltipFormat` | Text input | `{series.name}:{point.y:,.0f}` | Highcharts format string for the tooltip on hover. |
| Show Legend | `chartData.showLegend` | Toggle | OFF | Displays a legend identifying each data series. |
| ↳ Enable Dynamic Legend | `chartData.enableDynamicLegend` | Toggle | OFF | For line charts, shows only the keys for series currently plotted. Visible when **Show Legend** is **ON**. |

### Additional Data Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Month Format | `chartData.dateFormat` | Drop-down | — | Controls how month names display on datetime axes. Options: **Short** (Jan), **Long** (January), **Number** (1). |
| Drilldown | `chartData.drilldown` | Text input | — | Configures drilldown behavior for nested category hierarchies. |
| Aggregation | `chartData.aggregation` | Text input | — | Configures aggregation when one variable tracks cascading status. |
| Top | `chartData.top` | Text input | — | Limits the number of top records returned. |

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

Enter inputs components and actions you want the component to perform.

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.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

PDF (Portable Document Format) is a file format that allows users to share and print documents without modifying them.

Enter inputs components and actions you want the component to perform..

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

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.

Enter outputs components and actions you want the component to perform.

A string is an object that represents a sequence of characters. Strings typically hold data represented in text form.

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.