The Dynamic Gantt Chart component provides a visual timeline representation of tasks, events, or activities with their schedules and dependencies. This component is ideal for project management, scheduling, and resource allocation visualization, allowing users to view how different activities are distributed over time and across different resources.
titleTranslation - Sets the title text displayed above the Gantt chart with support for multiple languages. For example, {"en-US": "Project Schedule", "de-DE": "Projektplan"} ensures proper localization of the header text.
globalEventColor - Specifies the default color used for events in the Gantt chart. For example, setting it to a brand color ensures visual consistency with the application's design system.
globalEventIconName - Sets the default icon displayed with events in the Gantt chart. For example, "calendar" could be used to indicate scheduled tasks.
resourceColumnCaptionTranslation - Sets the header text for the resource column with language support. For example, {"en-US": "Team Members", "de-DE": "Teammitglieder"} provides localized column headers.
resourceColumnFieldExpression - Specifies which data field to use for displaying resource names. For example, "fullName" would display the full name of each resource.
resourceColumnAutoWidth - Determines whether the resource column width should adjust automatically based on content. When enabled, the column will expand or contract to fit the resource names.
resourceColumnWidth - Sets a fixed width in pixels for the resource column. For example, 150 pixels provides enough space for typical resource names while conserving screen space for the timeline.
eventNameExpression - Defines which data field to use for event names. For example, "taskName" would display the task name for each event in the chart.
eventResourceIdExpression - Specifies which data field contains the resource ID for each event. For example, "assignedToId" would link events to resources based on this field.
eventStartDateExpression - Determines which data field contains the start date for each event. For example, "plannedStartDate" would use the planned start date for positioning events.
eventEndDateExpression - Specifies which data field contains the end date for each event. For example, "plannedEndDate" would define when each event is scheduled to complete.
currentTimeLineEnabled - Controls whether to display a line indicating the current time in the chart. When enabled, users can easily see which tasks are past, current, or future.
currentTimeLineUpdateIntervalInMs - Sets how frequently (in milliseconds) the current time line updates. For example, 60000 would update the line position every minute.
relativeTimeViewEnabled - Determines whether to use relative time frames for the chart view. When enabled, the chart will display time periods relative to the current date.
relateTimeView - Defines which relative time frame to use when relativeTimeViewEnabled is true. Options include "today", "thisweek", "thismonth", etc. For example, "this_month" shows the current month's timeline.
dynamicTimeView - Controls whether the time view updates automatically over time. When enabled, the view will shift as time progresses to keep the current period visible.
paddingClass - Configures spacing around the Gantt chart using CSS classes. For example, "p-3" adds medium padding around the chart for better visual spacing.
useMockData - Determines whether the component should use sample mock data instead of fetching from an API. When enabled during development, the chart displays realistic sample data without requiring backend connections.
getResourcesDataSourceId - Specifies the data source ID for retrieving resource data. For example, "api/resources" connects the chart to a backend endpoint that provides resource information.
getResourcesSourceHttpRequestParametersMap - Configures HTTP request parameters for fetching resource data. This allows for customization of the resource data request, such as filtering for specific resource types.
getEventsDataSourceId - Specifies the data source ID for retrieving event data. For example, "api/tasks" connects the chart to a backend endpoint that provides task or event information.
getEventsDataSourceHttpRequestParametersMap - Configures HTTP request parameters for fetching event data. This allows for customization of the event data request, such as filtering for a specific time period.
id - Specifies a unique identifier for the component used for programmatic access. For example, "projectGanttChart" enables targeted manipulation of this specific chart.
dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "project-gantt-chart" allows test scripts to reliably locate this component.
enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, this chart can be highlighted during guided tours of the application.
guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Project Timeline", "de-DE": "Projektzeitplan"} provides localized titles for the hotspot.
guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This chart shows your project schedule", "de-DE": "Diese Grafik zeigt Ihren Projektzeitplan"} provides localized descriptions.
The component expects resource data in the following format:
[
{
"id": "resource-1",
"name": "John Smith",
"role": "Developer",
"availability": 0.8
},
{
"id": "resource-2",
"name": "Jane Doe",
"role": "Designer",
"availability": 1.0
}
]
The actual field names can be customized through the resource configuration properties.
The component expects event data in the following format:
[
{
"id": "task-1",
"name": "Research Phase",
"resourceId": "resource-1",
"startDate": "2025-05-01T08:00:00Z",
"endDate": "2025-05-05T17:00:00Z",
"completion": 100,
"color": "#4CAF50"
},
{
"id": "task-2",
"name": "Design Phase",
"resourceId": "resource-2",
"startDate": "2025-05-06T08:00:00Z",
"endDate": "2025-05-12T17:00:00Z",
"completion": 50,
"color": "#2196F3"
}
]
The actual field names can be customized through the event configuration properties.