---
title: "How to Develop a Flight Tracker Application with React Gantt Chart"
published_at: "2021-05-05T11:45:45+00:00"
modified_at: "2025-11-14T11:09:04+00:00"
url: "https://www.syncfusion.com/blogs/post/flight-tracker-application-with-react-gantt-chart"
excerpt: "Our Syncfusion React Gantt Chart component is a specialized chart tool that supports the customization of various Gantt elements such as timelines, taskbars, column headers, cells, labels, and tooltips. In this article, we’ll see how to customize these Gantt Chart..."
taxonomy_category:
  - "Gantt"
  - "React"
  - "Web"
taxonomy_post_tag:
  - "Gantt Chart"
  - "React"
  - "Web"
  - "Web Development"
---

# How to Develop a Flight Tracker Application with React Gantt Chart

[Jayakumar Duraisamy](https://www.syncfusion.com/blogs/author/jayakumar-duraisamy)

![Develop a Flight Tracker Application With React Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/Develop-a-Flight-Tracker-Application-With-React-Gantt-Chart-1.png)


Our Syncfusion [React Gantt Chart component](https://www.syncfusion.com/react-ui-components/react-gantt-chart)
 is a specialized chart tool that supports the customization of various Gantt elements such as timelines, taskbars, column headers, cells, labels, and tooltips.

In this article, we’ll see how to customize these Gantt Chart elements to develop a flight tracker application. As we all know, flights are scheduled at different airports at different times. In this application, we are going to display all the scheduled fights and their live tracking status at different airports.

![Collapsed view of flight tracker application](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Collapsed-view-of-flight-tracker-application.png)

Collapsed view of flight tracker application

You can also check the status of each flight in detail by expanding each airport like in the following screenshot.

![Detailed view of the flight tracker application](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Detailed-view-of-the-flight-tracker-application.png)

Detailed view of the flight tracker application

## Customization of Gantt Chart elements

We are going to customize the following Gantt Chart elements to develop our flight tracker application:

- [Taskbar](#taskbar)
- [Grid cell](#grid-cells)
- [Header column](#header-column)
- [Tooltip](#tooltip)

### Taskbar

The taskbar can be used to show different statuses like auto or manual, unscheduled or scheduled (parent, child, milestone). You can customize it using either the [taskbarTemplate](https://ej2.syncfusion.com/react/documentation/gantt/appearance-customization/#taskbar-template)
 or [queryTaskbarInfo](https://ej2.syncfusion.com/react/documentation/api/gantt/#querytaskbarinfo)
 client-side event.

Refer to the following code example.

```
// Based on the current time, validated the flights into three categories: 
// 1. Completed journey – Denoted by green
// 2. In journey        - Denoted by light green
// 3. Not yet started   - Denoted by gray

taskbarTemplate(props) {
        var startTime = props.ganttProperties.startDate.getTime();
        var endTime = props.ganttProperties.endDate.getTime();
        var currentTime = new Date('02/13/2021 15:25:00').getTime();
        if (endTime < currentTime) {
            return (
                <div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#006400" }}>
                    {<div>
                        <span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
                            <b>{props.Name}</b></span>
                    </div>}

                </div>);
        } else if (startTime < currentTime) {
            return (
                <div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#90EE90" }}>
                    {<div>
                        <span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
                            <b>{props.Name}</b></span>
                    </div>}

                </div>);

        } else {
            return (
                <div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#C0C0C0" }}>
                    {<div>
                        <span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
                            <b>{props.Name}</b></span>
                    </div>}

                </div>);

        }
    };
```

![Customizing the taskbar element in React Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Customizing-the-taskbar-element-in-React-Gantt-Chart.png)

Customizing the taskbar element in React Gantt Chart

### Grid cells

You can customize the grid cells using the [querycellinfo](https://ej2.syncfusion.com/react/documentation/gantt/appearance-customization/#customize-rows-and-cells)
 client-side event. The argument of this event will have the data, column, and cell element values. This event will be triggered before rendering each cell. Customize the cell elements of each cell in this event.

```
// Based on the current time, validated the flights into three categories: 
    // 1. Completed journey   - Denoted by green
    // 2. In journey          - Denoted by light green 
    // 3. Not yet started     - Denoted by gray  
    queryCell(props) {
        if (!props.data.hasChildRecords && props.column.field == 'Name') {
            var startTime = props.data.ganttProperties.startDate.getTime();
            var endTime = props.data.ganttProperties.endDate.getTime();
            var currentTime = new Date('02/13/2021 15:25:00').getTime();
            if (endTime < currentTime) {
                props.cell.style.backgroundColor = '#006400';
            } else if (startTime < currentTime) {
                props.cell.style.backgroundColor = '#90EE90';
            } else {
                props.cell.style.backgroundColor = '#C0C0C0';
            }
        }
    }
```

![Customizing the grid cell element in React Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Customizing-the-grid-cell-element-in-React-Gantt-Chart.png)

Customizing the grid cell element in React Gantt Chart

### Header column

The header column can be customized by using the [header template](https://ej2.syncfusion.com/react/documentation/gantt/columns/#custom-column-header)
 property. You can also render the HTML elements inside the template to customize the column header.

Refer to the following code.

```
<ColumnsDirective>
                    {/**Column header template*/}
                    <ColumnDirective field="Model" headerText='Flight' headerTemplate={() => {
                        return (<div style={{ marginLeft: "20px" }}><img src="./image/airplane.png" width="20" height="20" className="e-image" /></div>);
                    }} ></ColumnDirective>
                </ColumnsDirective>
```

![Customizing the header column element in React Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Customizing-the-header-column-element-in-React-Gantt-Chart.png)

Customizing the header column element in React Gantt Chart

### Tooltip

The Gantt Chart taskbar tooltip can also be customized using the [template](https://ej2.syncfusion.com/react/documentation/gantt/tool-tip/#tooltip-template)
 property. Get the Gantt data inside the template to render in the tooltip.

Refer to the following code.

```
// Template code for taskbar tooltip.
    tooltipTemplate(props) {
        var data = props.taskData;        
        return (
            <table>
                <tr><img src="./image/airplane.png" ></img></tr>
                <tr><td>Flight</td><td>{data.Name}</td></tr>
                <tr><td>From</td><td>{data.From}</td></tr>
                <tr><td>To</td><td>{data.To}</td></tr>
                <tr><td>Dep</td><td>{data.Dep.getHours()} : {data.Dep.getMinutes()}</td></tr>
                <tr><td>Arr</td><td>{data.Arr.getHours()} : {data.Arr.getMinutes()}</td></tr>
                <tr><td>Model</td><td>{data.Model}</td></tr>
            </table>
        );
    }
```

![Customizing tooltip element in React Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Customizing-tooltip-element-in-React-Gantt-Chart.png)

Customizing tooltip element in React Gantt Chart

## GitHub sample

For more information, refer to the [Flight tracker application using React Gantt Chart demo](https://github.com/SyncfusionExamples/airlines-tracker-using-gantt-chart)
.

## Conclusion

In this article, we have explained how to customize our Syncfusion [React Gantt Chart component](https://www.syncfusion.com/react-ui-components/react-gantt-chart)
 to develop a flight tracker application. Try out the ideas given in this blog post and leave your feedback in the comments section below. Refer to this[sample browser](https://ej2.syncfusion.com/react/demos/#/material/gantt/taskbar-template)
 and these [documentation](https://ej2.syncfusion.com/react/documentation/gantt/appearance-customization/)
 pages to learn more about our Gantt Chart’s features.

Our Gantt Chart is also available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-gantt-chart)
, ASP.NET ([MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/gantt-chart)
 and [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/gantt-chart)
), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart)
, [Angular](https://www.syncfusion.com/angular-ui-components/angular-gantt-chart)
, [Vue](https://www.syncfusion.com/vue-ui-components/vue-gantt-chart)
, [WPF](https://www.syncfusion.com/wpf-ui-controls/gantt)
, and [UWP](https://www.syncfusion.com/uwp-ui-controls/gantt)
 platforms. Use them to build astonishing web applications!

You can contact us through our [support forum](https://www.syncfusion.com/forums)
, [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents)
, or [feedback portal](https://www.syncfusion.com/feedback/)
. We are always happy to assist you!

If you liked this blog post, we think you’ll also like the following articles:

- [Overview of Syncfusion React Gantt Chart Component](https://www.syncfusion.com/blogs/post/overview-syncfusion-react-gantt-chart.aspx) [Blog]
- [How to Integrate Syncfusion React Components into a Meteor Application](https://www.syncfusion.com/blogs/post/how-to-integrate-syncfusion-react-components-into-a-meteor-application.aspx) [Blog]
- [Top 5 Features of React Menu Bar](https://www.syncfusion.com/blogs/post/top-5-features-of-react-menu-bar.aspx) [Blog]
- *[React Succinctly](https://www.syncfusion.com/ebooks/react-succinctly)* [Ebook]