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 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
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 EventOutputs 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 Settings
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.
Changelog
Date
Change
—
Initial publication.
Enter inputs components and actions you want the component to perform.
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.
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.
XLS is a file extension for Microsoft Excel spreadsheets
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..
DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.
Enter outputs components and actions you want the component to perform.
