Update Angular Gantt Chart Data Dynamically Using updateDataSource

Overview

In the Angular Gantt Chart component, the updateDataSource public method allows you to dynamically refresh the chart’s data source. It also lets you optionally update the project’s start and end dates without reinitializing the component, making it ideal for real-time data updates.

Steps to Configure

1. Create a Trigger Button and Set Up the Gantt Chart in the Template

Implement a button component with a click event and define the Gantt Chart component with necessary configuration.

<button ejs-button (click)="updateDataSource()">Update Data Source</button>

<ejs-gantt #gantt id="ganttDefault">
    <!-- Gantt chart configuration -->
</ejs-gantt>

2. Implement the updateDataSource Logic in Your Component Class

Handle the updateDataSource method inside the button’s click event handler.

updateDataSource(): void {
    const dateInfo = {
        projectStartDate: new Date('03/26/2025'),
        projectEndDate: new Date('09/10/2025')
    };
    this.ganttObj.updateDataSource(editingData, dateInfo);
}

Ensure editingData is a valid array of task objects compatible with the Gantt chart’s data structure.

Sample

Refer to this Sample for more information.

Conclusion

The updateDataSource method provides a clean and efficient way to refresh the Gantt chart dynamically. It is especially useful in scenarios where task data changes frequently or needs to be updated based on user actions, all without the overhead of reinitializing the component.

We hope this article helped you learn how to update data using updateDataSource in Angular Gantt Chart.

You can refer to our Angular Gantt chart feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our Angular Gantt Chart example to understand how to create and manipulate data.