# gantt-default

> Gantt chart displays project tasks with dependencies, baselines, predecessors, and indicators.

**Framework:** react  **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/react/js/gantt-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-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/Gantt.jsx

```jsx
import { GanttComponent, Inject, Selection, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';

let projectNewData = [
    { TaskID: 1, TaskName: "Product concept", StartDate: new Date("04/02/2025"), EndDate: new Date("04/08/2025") },
    { 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") },
    { 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 },
    { TaskID: 4, TaskName: "Prepare product sketch and notes", StartDate: new Date("04/05/2025"), Duration: 2, Progress: 30, ParentId: 1, Predecessor: "2" },
    { 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" }] },
    { 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") },
    { TaskID: 7, TaskName: "Demand analysis", Progress: 40, ParentId: 6 },
    { 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") },
    { TaskID: 9, TaskName: "Market opportunity analysis", StartDate: new Date("04/09/2025"), EndDate: new Date("04/12/2025"), Duration: 4, ParentId: 7, Predecessor: "5" },
    { 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" },
    { TaskID: 11, TaskName: "Product strength analysis", StartDate: new Date("04/15/2025"), EndDate: new Date("04/18/2025"), Duration: 4, Progress: 40, ParentId: 6, Predecessor: "9" },
    { TaskID: 12, TaskName: "Research completed", StartDate: new Date("04/18/2025"), EndDate: new Date("04/18/2025"), Duration: 0, Progress: 30, ParentId: 6, Predecessor: "10", Indicators: [{ date: new Date("04/20/2025"), name: "Research completed", tooltip: "Research completed", iconClass: "description e-icons" }] },
    { TaskID: 13, TaskName: "Product design and development", StartDate: new Date("04/19/2025"), EndDate: new Date("05/16/2025") },
    { TaskID: 14, TaskName: "Functionality design", StartDate: new Date("04/19/2025"), EndDate: new Date("04/23/2025"), Duration: 4, Progress: 30, ParentId: 13, Predecessor: "12" },
    { TaskID: 15, TaskName: "Quality design", StartDate: new Date("04/19/2025"), EndDate: new Date("04/23/2025"), Duration: 3, Progress: 40, ParentId: 13, Predecessor: "12" },
    { TaskID: 16, TaskName: "Define reliability", StartDate: new Date("04/24/2025"), EndDate: new Date("04/25/2025"), Duration: 4, Progress: 30, ParentId: 13, Predecessor: "15" },
    { TaskID: 17, TaskName: "Identifying raw materials", StartDate: new Date("04/24/2025"), EndDate: new Date("04/25/2025"), Duration: 2, ParentId: 13, Predecessor: "15" },
    { TaskID: 18, TaskName: "Define cost plan", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Progress: 30, ParentId: 13, Predecessor: "17" },
    { TaskID: 19, TaskName: "Estimate manufacturing cost", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Duration: 3, Progress: 40, ParentId: 18, Predecessor: "17" },
    { TaskID: 20, TaskName: "Estimate selling cost", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Duration: 3, Progress: 30, ParentId: 18, Predecessor: "17" },
    { TaskID: 21, TaskName: "Development of final design", StartDate: new Date("04/30/2025"), EndDate: new Date("05/08/2025"), ParentId: 13 },
    { TaskID: 22, TaskName: "Develop dimensions and design", StartDate: new Date("04/30/2025"), EndDate: new Date("05/01/2025"), Duration: 4, Progress: 30, ParentId: 21, Predecessor: "19,20" },
    { TaskID: 23, TaskName: "Develop designs to meet industry", StartDate: new Date("05/02/2025"), EndDate: new Date("05/03/2025"), Duration: 3, Progress: 40, ParentId: 21, Predecessor: "22" },
    { TaskID: 24, TaskName: "Include all the details", StartDate: new Date("05/06/2025"), EndDate: new Date("05/08/2025"), Duration: 4, Progress: 30, ParentId: 21, Predecessor: "23" },
    { TaskID: 25, TaskName: "CAD - Computer Aided Design", StartDate: new Date("05/09/2025"), EndDate: new Date("05/13/2025"), Duration: 3, Predecessor: "24" },
    { TaskID: 26, TaskName: "CAM - Computer Aided Manufacturing", StartDate: new Date("05/14/2025"), EndDate: new Date("05/16/2025"), Duration: 4, Progress: 30, Predecessor: "25" },
    { TaskID: 27, TaskName: "Finalize the design", StartDate: new Date("04/16/2025"), EndDate: new Date("04/16/2025"), Duration: 0, Progress: 40, Predecessor: "26" },
    { TaskID: 28, TaskName: "Prototype testing", StartDate: new Date("05/17/2025"), EndDate: new Date("05/22/2025"), Duration: 4, Progress: 30, Predecessor: "27" },
    { TaskID: 29, TaskName: "Include feedback", StartDate: new Date("05/17/2025"), EndDate: new Date("05/22/2025"), Duration: 4, Predecessor: "28ss", Indicators: [{ date: new Date("05/30/2025"), name: "Production phase", tooltip: "Production phase completed", iconClass: "okIcon e-icons" }] },
    { TaskID: 30, TaskName: "Manufacturing", StartDate: new Date("05/23/2025"), EndDate: new Date("05/29/2025"), Duration: 5, Progress: 30, Predecessor: "28,29" },
    { TaskID: 31, TaskName: "Assembling material into finished goods", StartDate: new Date("05/30/2025"), EndDate: new Date("06/05/2025"), Duration: 5, Progress: 40, Predecessor: "30" },
    { TaskID: 32, TaskName: "Final product development", StartDate: new Date("06/06/2025"), EndDate: new Date("06/13/2025"), Progress: 30 },
    { TaskID: 33, TaskName: "Important improvement", StartDate: new Date("06/06/2025"), EndDate: new Date("06/10/2025"), Duration: 3, ParentId: 32, Predecessor: "31" },
    { TaskID: 34, TaskName: "Customer testing and feedback", StartDate: new Date("06/11/2025"), EndDate: new Date("06/13/2025"), Duration: 4, Progress: 30, ParentId: 32, Predecessor: "33" },
    { TaskID: 35, TaskName: "Final product development", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Progress: 40 },
    { TaskID: 36, TaskName: "Important improvement", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Duration: 4, Progress: 30, ParentId: 35, Predecessor: "34" },
    { TaskID: 37, TaskName: "Address any unforeseen issues", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Duration: 4, Progress: 30, Predecessor: "36ss", ParentId: 35, Indicators: [{ date: new Date("06/30/2025"), name: "Sales and marketing", tooltip: "Sales and marketing", iconClass: "description e-icons" }] },
    { TaskID: 38, TaskName: "Finalize the product", StartDate: new Date("06/20/2025"), EndDate: new Date("07/01/2025"), Progress: 40 },
    { TaskID: 39, TaskName: "Branding the product", StartDate: new Date("06/20/2025"), EndDate: new Date("06/25/2025"), Duration: 4, Progress: 30, ParentId: 38, Predecessor: "37" },
    { TaskID: 40, TaskName: "Marketing and presales", StartDate: new Date("06/26/2025"), EndDate: new Date("07/01/2025"), Duration: 4, ParentId: 38, Predecessor: "39" }
];

const Default = () => {
    let ganttInstance;
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentId'
    };
    const labelSettings = {
        leftLabel: 'TaskName'
    };
    const splitterSettings = {
        columnIndex: 2
    };
    const projectStartDate = new Date('03/26/2025');
    const projectEndDate = new Date('07/20/2025');
    const onCreated = () => {
        if (document.querySelector('.e-bigger')) {
            ganttInstance.rowHeight = 48;
            ganttInstance.taskbarHeight = 28;
        }
    };
    return (<div className='control-pane'>
      <div className='control-section'>
        <GanttComponent id='Default' ref={gantt => ganttInstance = gantt} dataSource={projectNewData} treeColumnIndex={1} taskFields={taskFields} splitterSettings={splitterSettings} labelSettings={labelSettings} height='650px' taskbarHeight={25} rowHeight={46} projectStartDate={projectStartDate} projectEndDate={projectEndDate} created={onCreated}>
          <ColumnsDirective>
            <ColumnDirective field='TaskID' width='80'></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Job Name' width='250' clipMode='EllipsisWithTooltip'></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='Duration'></ColumnDirective>
            <ColumnDirective field='Progress'></ColumnDirective>
            <ColumnDirective field='Predecessor'></ColumnDirective>
          </ColumnsDirective>
          <Inject services={[Selection]}/>
        </GanttComponent>
      </div>
    </div>);
};
export default Default;
```