{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "gantt-default",
  "framework": "vue",
  "type": "registry:component",
  "component": "Gantt",
  "variant": "default",
  "dependencies": [
    "@syncfusion/ej2-vue-gantt",
    "@syncfusion/ej2-vue-grids"
  ],
  "description": "Gantt chart displays project tasks with dependencies, baselines, and predecessors.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/gantt-default.md"
  },
  "files": [
    {
      "target": "src/components/gantt-default/Gantt.vue",
      "content": "<template>\n    <div class=\"col-lg-12 control-section\">\n        <div>\n            <ejs-gantt ref=\"gantt\" id=\"GanttContainer\" :dataSource=\"data\" :splitterSettings=\"splitterSettings\"\n                :height=\"height\" :rowHeight=\"46\" :taskbarHeight=\"25\" :created=\"created\" :highlightWeekends='true'\n                :taskFields=\"taskFields\" :labelSettings=\"labelSettings\" :treeColumnIndex=\"1\" :columns=\"columns\"\n                :projectStartDate=\"projectStartDate\" :projectEndDate=\"projectEndDate\">\n            </ejs-gantt>\n        </div>\n    </div>\n</template>\n<script>\nimport { GanttComponent, Selection, DayMarkers } from \"@syncfusion/ej2-vue-gantt\";\nimport { created } from \"@syncfusion/ej2-vue-grids\";\n\nconst projectNewData = [\n    { TaskID: 1, TaskName: \"Product concept\", StartDate: new Date(\"04/02/2025\"), EndDate: new Date(\"04/08/2025\") },\n    { TaskID: 2, TaskName: \"Define the product usage\", StartDate: new Date(\"04/02/2025\"), EndDate: new Date(\"04/08/2025\"), Duration: 1, Progress: 30, ParentId: 1, BaselineStartDate: new Date(\"04/02/2025\"), BaselineEndDate: new Date(\"04/02/2025\") },\n    { TaskID: 3, TaskName: \"Define the target audience\", StartDate: new Date(\"04/02/2025\"), EndDate: new Date(\"04/04/2025\"), Duration: 2, Progress: 40, ParentId: 1 },\n    { TaskID: 4, TaskName: \"Prepare product sketch and notes\", StartDate: new Date(\"04/05/2025\"), Duration: 2, Progress: 30, ParentId: 1, Predecessor: \"2\" },\n    { TaskID: 5, TaskName: \"Concept approval\", StartDate: new Date(\"04/08/2025\"), EndDate: new Date(\"04/08/2025\"), Duration: 0, ParentId: 1, Predecessor: \"3,4\", Indicators: [{ date: new Date(\"04/07/2025\"), name: \"Design Phase\", tooltip: \"Design phase completed\", iconClass: \"okIcon e-icons\" }] },\n    { TaskID: 6, TaskName: \"Market research\", StartDate: new Date(\"04/09/2025\"), EndDate: new Date(\"04/18/2025\"), Progress: 30, BaselineStartDate: new Date(\"04/09/2025\"), BaselineEndDate: new Date(\"04/09/2025\") },\n    { TaskID: 7, TaskName: \"Demand analysis\", Progress: 40, ParentId: 6 },\n    { TaskID: 8, TaskName: \"Customer strength\", StartDate: new Date(\"04/09/2025\"), EndDate: new Date(\"04/12/2025\"), Duration: 4, Progress: 30, ParentId: 7, Predecessor: \"5\", BaselineStartDate: new Date(\"04/12/2025\"), BaselineEndDate: new Date(\"04/13/2025\") },\n    { TaskID: 9, TaskName: \"Market opportunity analysis\", StartDate: new Date(\"04/09/2025\"), EndDate: new Date(\"04/12/2025\"), Duration: 4, ParentId: 7, Predecessor: \"5\" },\n    { TaskID: 10, TaskName: \"Competitor analysis\", StartDate: new Date(\"04/15/2025\"), EndDate: new Date(\"04/18/2025\"), Duration: 4, Progress: 30, ParentId: 6, Predecessor: \"7,8\" }\n];\n\nexport default {\n    components: {\n        'ejs-gantt': GanttComponent\n    },\n    data: function () {\n        return {\n            data: projectNewData,\n            height: '650px',\n            taskFields: {\n                id: 'TaskID',\n                name: 'TaskName',\n                startDate: 'StartDate',\n                endDate: 'EndDate',\n                duration: 'Duration',\n                progress: 'Progress',\n                dependency: 'Predecessor',\n                parentID: 'ParentId'\n            },\n            labelSettings: {\n                leftLabel: 'TaskName'\n            },\n            splitterSettings: {\n                columnIndex: 2\n            },\n            columns: [\n            { field: 'TaskID', width: 80 },\n            { field: 'TaskName', headerText: 'Name', width: 280 },\n            { field: 'StartDate' },\n            { field: 'EndDate' },\n            { field: 'Duration' },\n            { field: 'Predecessor' },\n            { field: 'Progress' }\n        ],\n            projectStartDate: new Date('03/26/2025'),\n            projectEndDate: new Date('07/20/2025')\n        };\n    },\n    provide: {\n        gantt: [Selection, DayMarkers]\n    },\n    methods: {\n        created() {\n            const ganttObj = this.$refs.gantt?.ej2Instances;\n            if (document.querySelector('.e-bigger')) {\n                ganttObj.rowHeight = 48;\n                ganttObj.taskbarHeight = 28;\n            }\n        }\n    }\n}\n</script>\n"
    },
    {
      "target": "src/components/gantt-default/GanttView.vue",
      "content": "<template>\n  <Gantt />\n</template>\n\n<script setup>\nimport Gantt from '../../components/Gantt.vue'\n</script>"
    }
  ]
}