Gantt Chart

View video

The Gantt chart is a visual representation of activities over time, allowing you to track deadlines, duration, and overlapping tasks.

Chart Title

Defines the title of the Gantt chart that will be displayed in the application.

The text definition has no character restriction and can be done with a fixed text or using a lang, to create systems with multiple languages.

See more details about langs and about our Data dictionary.

Example of the chart title displayed in the application.

Chart Theme

This attribute defines the theme used for the Gantt chart, working independently from the application’s general theme.

Available options:

• Inherit application theme: Applies the chart theme defined in the application’s general theme settings. Themes can be edited via Layout > Themes for applications.
• Theme list: Displays the themes created under Layout > Chart Themes.

Chart Position

Defines the position of the application on the screen when the Gantt chart is displayed. The application can be aligned to the Left, Center, or Right.

Label Field

Defines the field that will be displayed in the main column of the Gantt chart. This attribute is required for the chart to be displayed.

Example of a Gantt chart with a task list, where the attribute is set to the task name field.

Width

Defines the available width for displaying the Gantt chart.

This field accepts values in pixels (e.g., 800px) or percentage (e.g., 100%), allowing you to control how the chart adapts to the available screen space.

Height

Allows you to set the height of the Gantt chart using fixed values in pixels (e.g., 600px).

Unlike width, this field does not accept percentage values. The height must be defined with a fixed size to ensure proper display of the entire chart.

Extra Buttons

Allows you to configure buttons displayed in the Gantt chart’s toolbar.

Available options

• Choose Gantt theme: When enabled, displays a combo box with the list of available chart themes.
• Select periods in the title bar: Enables a button in the chart toolbar that allows users to change the period view configured in the application.

Example of the buttons in the interface.

Display Periods

Use this attribute to define the time intervals for data display in the chart, which can be: Year, Semester, Quarter, and Month.

This attribute also defines the available values in the Set Periods button.

Example of the chart with all periods selected.

Start Date

Indicates the actual start date of the activity in the Gantt chart.

This attribute must be assigned a date field that stores this information, essential for displaying the execution bar in the chart.

End Date

This attribute indicates the actual completion date of the activity.

Along with the Start Date field, it is responsible for rendering the execution bar that represents the progress of the activity.

Example of the execution bar in the Gantt chart.

Planned Start Date

Together with the Planned End Date attribute, it is responsible for displaying the planning bar in the Gantt chart.

This field should be mapped to a date field that contains the planned start date for the activity.

This field is optional. However, if left blank, the planning bar will not be displayed in the chart.

Planned End Date

Responsible for rendering the planning bar in the Gantt chart together with the Planned Start Date field.

This field must be mapped to a date field that stores the planned end date of the activity.

Example of the planning bar in the Gantt chart.

This field is optional. However, if left blank, the planning bar will not be displayed in the chart.

Display Format

Allows you to define the date format displayed in the Gantt chart.

Available options:

• Use Regional Settings: This is the default option. It allows the date format to adapt according to the selected language. You can customize regional settings in your project via Locales > Regional Settings.
• dd/mm/yyyy: displays the date in day/month/year format (e.g., 25/10/2025).
• mm/dd/yyyy: displays the date in month/day/year format (e.g., 10/25/2025), mainly used in English (US) systems.

Percent Complete

Defines the activity progress as a percentage, indicating the status of the task.

This field must contain a numeric value between 0 and 100, representing the completion percentage of the activity. This value is used to display a progress bar within the Gantt chart.

This field is ignored when both the Planned Start Date and Planned End Date fields are filled. In such cases, the chart uses the planned start and end dates to calculate progress and delay.

Resource

Defines the resource used for each activity.

This field can represent a person, team, or any other element assigned to perform the activity.

When configured, this field adds a second column to the Gantt chart displaying the assigned resources.

Example of the resource column in the chart:

Predecessor Task

Defines the dependency between activities in the Gantt chart.

The “Predecessor Task” should contain the identifier (ID) of the activity that must be completed before the current one starts. This relationship creates a visual dependency line between the chart bars.

This attribute works together with the Task ID field.

Task ID

Defines the field that stores the unique identifier of each activity in the Gantt chart.

It is used in conjunction with the Predecessor Task field to create the link between activities and render the visual dependency line.

Example of the line generated between activities:

Milestone Date

Defines a milestone in the schedule, represented as a fixed point in the Gantt chart.

This field must contain the date of an important event or key delivery within the project timeline.

Example of a milestone represented in the chart: