Chart

Transform your data into visual insights through various chart types.

Properties

Property	Type	Description
name	string	Unique identifier for the chart component
data (code)	string (ChartData)	Data to display in the chart
title	string	Title displayed at the top of the chart
subtitle	string	Subtitle displayed at the top of the chart
type	ChartType	Type of chart to display
xAxis	ChartXAXis	X-axis data and title
datasets (Y-axis type, title, calculation function)	ChartDataset[]	Y-axis type, title and calculation function datasets
divider	ChartDivider	Key to split Y-axis data
isStacked	boolean	Enable stacked bar chart
isHeightFixed	boolean	Enable fixed height for the chart
contentHeight	string	Fixed height of the chart
isHidden	boolean	Whether to hide the chart on the deployed page

name

Unique identifier for the chart component. Please refer to the component naming rules

data (code)

Sets the data series to be visualized in the chart.
Can be set through workflow results, direct input.

title

Sets the main chart heading.
Supports Template Text for dynamic content.

subtitle

Sets the secondary chart heading.
Supports Template Text for dynamic content.

type

Sets the chart visualization type.
Options:

• bar: Vertical bar chart - line: Line graph
• pie: Pie chart
• complex: Multi-axis visualization (supports bar and line only)

xAxis data and title

Configures the horizontal axis.
Settings:

• Data series key
• Axis label (supports Template Text)

datasets (Y-axis type, title, calculation)

Sets the type, title and calculation function for Y-axes.

Y-axis title supports Template Text.

For complex charts, multiple Y-axes can be configured.

Y-axis calculation functions include sum, average, and count.

divider

Sets a data field for series grouping.
Used to split data into multiple series.

isStacked

Enables stacked bar visualization.
Only applicable when using divider with bar charts.

isHeightFixed

Controls height behavior of the component.
When disabled, height adjusts automatically to content.

contentHeight

Sets the component's vertical height.
Can be set through workflow results, direct input.

isHidden

Controls visibility of the component.
When set to true:

• Hidden in deployed view
• Visible with reduced opacity in edit mode

Type Definitions

type ChartData = Record<string, unknown>[];

type ChartType = 'bar' | 'line' | 'pie' | 'complex';

type ChartDatasetType = 'bar' | 'line';

type ChartAggregationFn = 'avg' | 'count' | 'sum';

interface ChartDataset {
  type: ChartDatasetType;
  key: string;
  label: string;
  aggregationFn: ChartAggregationFn;
}

export interface ChartDivider {
  key: string;
}