# gantt-default

> Gantt chart displaying tasks, durations, dependencies, and project progress with selection.

**Framework:** javascript  **Component:** Gantt  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/javascript/gantt-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-gantt
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/gantt-default/default.html

```html
<div class="control-section">
    <div class="content-wrapper">
        <div id="DefaultFunctionalities">
        </div>
    </div>
</div>

```

### src/components/gantt-default/default.ts

```typescript
import { Gantt, Selection } from '@syncfusion/ej2-gantt';
import { projectNewData } from './data-source';

/**
 * Default Gantt sample
 */

Gantt.Inject(Selection);
(window as any).default = (): void => {
    let gantt: Gantt = new Gantt(
        {
            dataSource: projectNewData,
            height: '650px',
            rowHeight: 46,
            taskbarHeight: 25,
            taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                endDate: 'EndDate',
                duration: 'Duration',
                progress: 'Progress',
                dependency: 'Predecessor',
                parentID: 'ParentId'
            },
            treeColumnIndex: 1,
            columns: [
                { field: 'TaskID', width: 80 },
                { field: 'TaskName', headerText: 'Name', width: 280 },
                { field: 'StartDate' },
                { field: 'EndDate' },
                { field: 'Duration' },
                { field: 'Predecessor' },
                { field: 'Progress' }
            ],
            labelSettings: {
                leftLabel: 'TaskName'
            },
            splitterSettings: {
                columnIndex: 2
            },
            created: function() {
                if(document.querySelector('.e-bigger'))
                {
                    gantt.rowHeight = 48;
                    gantt.taskbarHeight = 28;
                }
            },
            projectStartDate: new Date('03/26/2025'),
            projectEndDate: new Date('07/20/2025')
        });
    gantt.appendTo('#DefaultFunctionalities');
};

```