User Manual

Radial Chart

23/12/25
Radial Chart

1. Overview of the Radial Chart Element

The Radial Chart element provides an effective display, particularly for ratio, performance, and comparison-focused analyses, by visualizing data on a circular axis. With categories placed along the radial axis, the value for each category is represented as a bar/slice extending outward from the center of the circle. This structure allows users to quickly interpret the relationships, ratios, and rankings between different categories in the data set.

(i) The Radial Chart element is supported in both web and mobile applications.

1.1. Common Use Cases

  • Displaying category-based performance metrics (e.g., department performance scores, product-based ratings)
  • Presenting ratios and percentages in a circular arrangement (e.g., target achievement percentages, distribution ratios)
  • Visually comparing different categories. Data comparison becomes intuitive thanks to categories arranged along the circle.
  • Analyzing the overall situation and ranking at a glance. The highest and lowest values are easily identified.
  • Use the radial bar structure to visualize trends or levels. (e.g., capacity ratio, success rate, rating levels)

2. Key Features

  • Category-based data display with a circular bar structure. Each category is placed on the circle and represented by a bar/slice extending outward according to its value.
  • Ideal structure for proportional data analysis. Each category can be compared based on percentage or score values.
  • Simultaneous comparison for multiple categories. All categories are displayed on the same reference plane on the circle.
  • Dynamic loading support from the data source. Current data can be automatically retrieved using SQL, REST API, or Managed DB actions.
  • Customizable category names and values. Tag color, font, and position can be adjusted.

2.1. Element Settings (Properties)

When you select the Radial Chart element, you can define data sources, levels, slice labels, percentage values, and line/style configurations in detail via the Properties panel on the right. All settings are explained item by item below.

Options (General Data Settings)

  • Actions: Defines the SQL actions that bring the categorical data to be displayed on the Radial Chart. One or more actions can be used as the data source.
  • Slice Label Field: Specifies the category label to be displayed on each slice. E.g.: “Sales,” “Performance,” “Capacity.”
  • Slice Text Field: Defines the text to be displayed inside the slices. Can be used as an additional explanation, short description, or value representative.
  • Percentage Field: Specifies the percentage value to be displayed in the slice. Represents the share of each slice in the total.
  • Point Field: Defines the values of specific points on the chart. Used to highlight specific data points, especially in multi-level or multi-point radial structures.

Levels

This area is used to configure the rings/levels within the Radial Chart.

  • Level Label Field: Defines the labels to be displayed on the level circles. E.g.: “Low,” “Medium,” “High.”
  • Level Text Field: Defines the text to be displayed inside each level. Can be used for level descriptions, category summaries, or additional information.
  • Level Percentage Field: Displays the percentage of each level within the total. Expresses the relative size of the levels.
  • Level Color Field: Defines the color palette for the levels. A different color can be assigned to each level, or single color variations can be used.

Line and Color Settings

  • Line Color: Determines the color of the main lines that form the radial chart. Used to customize the appearance of the circle lines and level contours.
  • Line Width: Sets the line thickness in the range of 1–8. Thicker lines provide a more prominent appearance, while thinner lines provide a more minimal appearance.
  • Radial Line Color: Determines the color of the radial lines extending outward from the center of the chart. Controls the visibility of the “spider web” lines that align the data points.
  • Background Color: Customizes the chart background color. Used to create a dark mode, light mode, or brand-themed appearance.
  • Legend Text Color: Determines the color of the text in the legend area. This is important for improving category readability in charts that use multiple slices or levels.

2.2. Actions That Can Be Added to Elements

Since the Radial Chart element is purely a visual data display component, it does not support triggering actions through user interaction. Therefore, when the element is selected, the ADD ACTION button is not visible and no trigger can be assigned to the chart.

Basic principles regarding action behavior:

  • Clicking, hovering, or selecting the Radial Chart does not trigger an action.
  • Updating the chart data is achieved by triggering SQL actions in the Datasource / Actions field linked to the Radial Chart by external UI elements.
  • If the chart needs to change based on user selections (e.g., year selection, category filter, user selection), this behavior is achieved by adding actions to elements such as Button, Radio Group.
  • The Radial Chart only displays data; it does not initiate any actions on its own.

Actions cannot be added to the Radial Chart; all data updates are managed by external actions.

3. Common Properties

Some areas on the Radial Chart element are common to all UI elements. Therefore, detailed explanations of the following properties can be found in the relevant general guide pages:

4. Best Practices

To ensure the Radial Chart provides a more readable, aesthetic, and accurate representation of data, the following recommendations should be followed:

  • Keep the Slice Label and Slice Text fields simple. Excessively long labels on slices can disrupt the appearance of the chart.
  • When using the Level Color Field, choose harmonious level colors. Highly contrasting colors can create visual clutter.
  • Ensure that Percent or Point Field values are in numerical format.
  • Adjust the Line Width setting according to the density of the chart.

5. Limitations

The following limitations should be considered when using Radial Chart:

  • A chart cannot be created without a datasource. Data fields only become active if an action is assigned.
  • Non-numeric values prevent the chart from being created. Fields such as Percentage Field, Level Percentage Field, and Point Field must be numeric.
  • Incorrect selection of the background color may reduce visual readability.
  • A high Line Width value may cause the chart to break in narrow spaces.
No items found.

Other Related Content

No items found.

Glossary

No items found.

Alt Başlıklar