Chart Component

The Chart component allows you to visualize data from your application in a clear and structured way. You can choose from different chart types based on your needs and adjust basic appearance settings such as background color, font color, and font size to improve readability and match your application’s design.

Supported Chart Types

The Chart component currently supports the following chart types:

Bar – Vertical bars used to compare values across categories

Horizontal Bar – Horizontal bars, useful for long category labels

Line – Displays trends and changes over time or continuous data

Scatter – Shows relationships or distributions between two numeric values

Radar – Compares multiple variables across categories in a radial layout

Pie – Displays proportions of a whole

Exploded Pie – A pie chart with separated segments for emphasis

Doughnut – Similar to a pie chart, but with a hollow center

Data Requirements and Setup

To render a chart, the Chart component requires an array of records as its data source, with each object in the array representing a single data record.

Defining the Data Source

1. In the Properties tab of the Chart component, locate the Data field option.
2. Select an array that contains the records you want to visualize.

Mapping Data Fields

After defining the data array, you must map specific fields from each record depending on the chart type:

X-axis – Represents categories or labels (for example names, dates, or identifiers)

Y-axis – Represents numeric values used for calculations and visualization

Below is a simple example of an array that can be used as a data source for a chart:

{
  "products": [
    {
      "product": "Phone",
      "qty": 120
    },
    {
      "product": "Laptop",
      "qty": 75
    },
    {
      "product": "Tablet",
      "qty": 210
    },
    {
      "product": "Smartwatch",
      "qty": 45
    },
    {
      "product": "Headphones",
      "qty": 160
    }
  ]
}

Chart Component

Advanced Settings by Chart Type

Available Advanced settings depend on the selected chart type.

Bar, Horizontal Bar, Line, Scatter

For these chart types, you can configure axis-related settings:

X Label – Defines the label text for the X-axis

Y Label – Defines the label text for the Y-axis

X Label Text Angle – Controls the rotation of the X-axis label text

Y Label Text Angle – Controls the rotation of the Y-axis label text

These options are useful for improving readability, especially when working with longer labels or dense data sets.

Pie, Exploded Pie, Doughnut

For circular chart types, axis settings are not applicable. Instead, you can configure:

Amount – The numeric value used to calculate segment sizes

Key – The label or category name for each segment

Percent – Displays the percentage representation of each segment

Related articles you may find helpful

• How can I manage the layer order of components?
• How to Integrate with Make
• Is it possible to conditionally change the component style or hide the component?

Updated on: 19/01/2026