Gantt Chart

📊 Gantt Chart Component in Lowcoder

The Gantt Chart component in Lowcoder provides a dynamic and visual way to manage and visualize project timelines, tasks, and dependencies. It enables users to plan, schedule, and track project progress efficiently.

🔧 Key Features

• Task Management: Create and manage tasks with attributes such as start/end dates, durations, progress indicators, and dependencies.

• Multiple View Modes: Switch between various time scales including Hour, Day, Week, Month, and Year to suit project needs.

• Interactive Editing: Support for drag-and-drop functionality to adjust task timelines directly within the chart.

• Customizable Styling: Extensive options to style chart elements, including bar colors, text sizes, row heights, and more.

• Event Handling: Handle events such as task date changes, clicks, deletions, and progress updates to trigger custom actions.

🛠 Configuration Options

• Data Binding: Bind the Gantt Chart to dynamic data sources using JSON arrays to populate tasks.

• Styling Sections:

  • Legend Header Style: Customize the header of the task list.

  • Legend Style: Style the task list area.

  • Tooltip Style: Define the appearance of tooltips displayed on hover.

  • Chart Style: Adjust the main chart's appearance, including bar colors and corner radius.

• Event Handlers: Implement custom logic for events like task selection, updates, and deletions.

⚙️ Integration Tips

• Dynamic Data Loading: Use queries to load tasks into the Gantt Chart based on specific criteria or filters.

• Real-Time Updates: Implement event handlers to refresh the chart when data changes occur elsewhere in the application.

• User Interaction Handling: Define actions to take when users interact with the chart, such as opening a task detail view when a bar is clicked.

Component Playground

On Component Playground, you can interact with the Gantt Chart component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Gantt Chart component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Component Auto-Docs

In the Auto-Docs of Gantt Chart component, we have shown how to use different properties of the Gantt Chart component. It also includes the Styling properties of the Gantt Chart component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Properties of the Gantt Chart component

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
hidden	Boolean	Returns True or False based on whether the Gantt Chartcomponent is hidden or not
data	Array	Returns an Array of Objects, containing data of the Gantt Chart's component

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Task Clicked	Triggers, when a Task is clicked
Task Selected	Triggers, when a Task gets selected for the first time
Task Updated	Triggers, when a Task is updated
Task Deleted	Triggers, when a Task gets deleted
Task Date Changed	Triggers, when a Task's date is changed
Task Progress Changed	Triggers, when a Task's progress is changed

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

setData() :

ganttChart1.setData() method sets the Gantt Chart's Data property, which sets the data to be shown in the Gantt Chart component.

ganttChart1.setData([
    {
        "label": "Some Project",
        "start": "2025-04-29T12:45:00.000Z",
        "end": "2025-05-14T19:00:00.000Z",
        "id": "ProjectSample",
        "project": "",
        "progress": 25,
        "type": "project",
        "hideChildren": false,
        "displayOrder": 1,
        "dependencies": [
            ""
        ]
    },
    {
        "label": "Idea",
        "start": "2025-04-29T12:45:00.000Z",
        "end": "2025-04-30T17:23:00.000Z",
        "id": "Task 0",
        "project": "ProjectSample",
        "progress": 45,
        "type": "task",
        "hideChildren": false,
        "displayOrder": 2,
        "dependencies": [
            ""
        ]
    }
]);

getData() :

ganttChart1.getData() gets the Gantt Chart's data from the Data property.

ganttChart1.getData();

resetGanttTasks() :

ganttChart1.resetGanttTasks() method resets the Gantt Chart's Data property to the default value of the Gantt Chart component.

ganttChart1.resetGanttTasks();

📌 Use Cases

• Project Management: Plan and track project tasks, timelines, and dependencies.

• Resource Allocation: Visualize resource assignments and workloads over time.

• Product Roadmapping: Outline product development phases and milestones.(npm, 2025 Gantt Chart Template)