Vue Gantt Chart Data Binding Example

This repository contains a Vue 3 app that binds a Vue Gantt Chart to remote task data using DataManager and WebApiAdaptor.

Project overview

The app renders a Syncfusion <ejs-gantt> chart in src/App.vue with columns for Task ID, Task Name, and Start Date. It loads hierarchical task data from a remote endpoint.

Key files

• src/App.vue
  • Renders the Gantt chart and maps fields such as TaskId, TaskName, StartDate, EndDate, Duration, Progress, Predecessor, and SubTasks.
• src/main.js
  • Creates the Vue app and registers a Syncfusion license.
• src/data.js
  • Includes local sample data (projectNewData, selfData) not currently used.
• src/components/HelloWorld.vue: default Vue CLI starter.

Dependencies

• vue ^3.2.13
• @syncfusion/ej2-vue-gantt ^21.1.38
• core-js

Setup

1. Install dependencies:

npm install

2. Run the app:

npm run serve

3. Open the local site in your browser:

http://localhost:8080/

Notes

• The current code uses remote data via DataManager and WebApiAdaptor.
• src/data.js contains local sample data not imported into App.vue.

Related Links

• Explore Vue Gantt Chart
• Vue Gantt Data Binding Documentation
• Vue Gantt Chart Getting Started Guide
• Feature Modules
• Vue Gantt Chart Live Demos and Examples