Task labels in Vue Gantt Chart component

3 Feb 20264 minutes to read

Task labels

The Gantt Chart component maps any data source fields to task labels using the labelSettings.leftLabel, labelSettings.rightLabel, and labelSettings.taskLabel properties. You can customize the task labels with templates.

Composition API (~/src/App.vue)

<template>
    <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :height="height" :taskFields="taskFields"
            :labelSettings="labelSettings" :projectStartDate="projectStartDate"
            :projectEndDate="projectEndDate"></ejs-gantt>
    </div>
</template>
<script setup>
import { GanttComponent as EjsGantt } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const height = '450px';
const taskFields = {
    id: 'TaskId',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentId'
};
const labelSettings = {
    leftLabel: 'Task Id: ${taskData.TaskId}',
    rightLabel: 'Task Name: ${taskData.TaskName}',
    taskLabel: '${Progress}%'
};
const projectStartDate = new Date('03/28/2019');
const projectEndDate = new Date('04/20/2019');
</script>

Options API (~/src/App.vue)

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :height = "height" :taskFields = "taskFields" :labelSettings="labelSettings" :projectStartDate="projectStartDate" :projectEndDate="projectEndDate"></ejs-gantt>
    </div>
</template>
<script>
import { GanttComponent } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
            data: editingData,
            height: '450px',
            taskFields: {
                id: 'TaskId',
                name: 'TaskName',
                startDate: 'StartDate',
                duration: 'Duration',
                progress: 'Progress',
                parentID: 'ParentId'
            },
            labelSettings: {
            leftLabel: 'Task Id: ${taskData.TaskId}',
            rightLabel:'Task Name: ${taskData.TaskName}',
            taskLabel: '${Progress}%'
        },
        projectStartDate: new Date('03/28/2019'),
        projectEndDate: new Date('04/20/2019'),
      };
  },
};
</script>