Top tier and bottom tier in React Gantt component
2 Feb 202323 minutes to read
Gantt component contains two tier layout in timeline, we can customize the top tier and bottom tier using topTier and bottomTier properties. Timeline tier’s unit can be defined by using unit property and format property was used to define date format of timeline cell and count property was used to define how many unit will be combined as single cell and formatter property was used to define custom method to format the date value of timeline cell.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields= {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const timelineSettings = {
topTier: {
format: 'MMM',
unit: 'Month'
},
bottomTier: {
unit: 'Day'
}
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const timelineSettings: any = {
topTier: {
format: 'MMM',
unit: 'Month'
},
bottomTier: {
unit: 'Day'
}
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Combining timeline cells
In Gantt, timeline cells in top tier and bottom tier can be combined with number of timeline units, this can be acheived by using topTier.count and bottomTier.count properties. Please refer the below sample.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const timelineSettings = {
timelineUnitSize:200,
topTier: {
unit: 'Year'
},
bottomTier: {
unit: 'Month',
count:6
}
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const timelineSettings: any = {
timelineUnitSize:200,
topTier: {
unit: 'Year'
},
bottomTier: {
unit: 'Month',
count:6
}
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Format value of timeline cell
In the Gantt component, you can format the value of top and bottom timeline cells using the standard date format string or the custom formatter method. This can be done using the topTier.format, topTier.formatter, bottomTier.format and bottomTier.formatter properties. The following example shows how to use the formatter method for timeline cells.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const timelineSettings = {
timelineUnitSize: 50,
topTier: {
unit: 'Month',
count: 3,
formatter: (date) => {
var month = date.getMonth();
if (month >= 0 && month <=2) {
return 'Q1';
} else if(month >= 3 && month <=5) {
return 'Q2';
} else if(month >= 6 && month <=8) {
return 'Q3';
} else {
return 'Q4';
}
}
},
bottomTier: {
unit: 'Month',
format: 'MMM'
},
};
return <GanttComponent dataSource={data} taskFields={taskFields} projectStartDate='01/04/2019' projectEndDate='12/30/2019'
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const timelineSettings: any = {
timelineUnitSize: 50,
topTier: {
unit: 'Month',
count: 3,
formatter: (date:any) => {
var month = date.getMonth();
if (month >= 0 && month <=2) {
return 'Q1';
} else if(month >= 3 && month <=5) {
return 'Q2';
} else if(month >= 6 && month <=8) {
return 'Q3';
} else {
return 'Q4';
}
}
},
bottomTier: {
unit: 'Month',
format: 'MMM'
},
};
return <GanttComponent dataSource={data} taskFields={taskFields} projectStartDate='01/04/2019' projectEndDate='12/30/2019'
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Timeline cell width
In the Gantt component, you can define the width value of timeline cell using the timelineSettings.timelineUnitSize property. This value will be set to the bottom timeline cell, and the width value of top timeline cell will be calculated automatically based on bottom tier cell width using the topTier.unit and timelineSettings.timelineUnitSize properties. Refer to the following example.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const timelineSettings = {
timelineUnitSize: 150
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const timelineSettings: any = {
timelineUnitSize: 150
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>