How to Develop a Flight Tracker Application with React Gantt Chart
Tags: webdev, react, javascript
Published: 2021-05-05 12:51:12

---
title: How to Develop a Flight Tracker Application with React Gantt Chart
published: true
date: 2021-05-05 11:45:45 UTC
tags: webdev, react, js
canonical_url: https://www.syncfusion.com/blogs/post/flight-tracker-application-with-react-gantt-chart.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/Develop-a-Flight-Tracker-Application-With-React-Gantt-Chart-672x372.png
---

Our Syncfusion [React Gantt Chart component](https://www.syncfusion.com/react-ui-components/react-gantt-chart "Link to 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)<figcaption>Collapsed view of flight tracker application</figcaption>

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)<figcaption>Detailed view of the flight tracker application</figcaption>

## 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 "Link to the taskbar template property of React Gantt Chart documentation") or [queryTaskbarInfo](https://ej2.syncfusion.com/react/documentation/api/gantt/#querytaskbarinfo " Link to the queryTaskbarinfo event of React Gantt Chart documentation") client-side event.

Refer to the following code example.

```js
// 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)<figcaption>Customizing the taskbar element in React Gantt Chart</figcaption>

### Grid cells

You can customize the grid cells using the [querycellinfo](https://ej2.syncfusion.com/react/documentation/gantt/appearance-customization/#customize-rows-and-cells "Link to customize rows and cells features in React Gantt Chart documentation") 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.

```js
// 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)<figcaption>Customizing the grid cell element in React Gantt Chart</figcaption>

### Header column

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

Refer to the following code.

```html
<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)<figcaption>Customizing the header column element in React Gantt Chart</figcaption>

### Tooltip

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

Refer to the following code.

```js
// 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)<figcaption>Customizing tooltip element in React Gantt Chart</figcaption>

## 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 "Link to React flight tracker application").

## 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 "Link to 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 "Link to the React Gantt Chart demos") and these [documentation](https://ej2.syncfusion.com/react/documentation/gantt/appearance-customization/ "Link to the React Gantt Chart documentation") 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 "Link to Blazor Gantt Chart"), ASP.NET ([MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/gantt-chart "Link to ASP.NET MVC Gantt Chart") and [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/gantt-chart "Link to ASP.NET Web Forms Gantt Chart")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart "Link to JavaScript Gantt Chart"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-gantt-chart "Link to Angular Gantt Chart"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-gantt-chart "Link to Vue Gantt Chart"), [WPF](https://www.syncfusion.com/wpf-ui-controls/gantt "Link to WPF Gantt Chart"), and [UWP](https://www.syncfusion.com/uwp-ui-controls/gantt "Link to UWP Gantt Chart") platforms. Use them to build astonishing web applications!

You can contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"). 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://dev.to/syncfusion/overview-of-syncfusion-react-gantt-chart-component-2fbo "Link to the article Overview of Syncfusion React Gantt Chart Component") [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 "Link to the article How to Integrate Syncfusion React Components into a Meteor Application") [Blog]
- [Top 5 Features of React Menu Bar](https://dev.to/syncfusion/top-5-features-of-react-menu-bar-52ph "Link to the article Top 5 Features of React Menu Bar") [Blog]
- _[React Succinctly](https://www.syncfusion.com/ebooks/react-succinctly "Link to the eBook React Succinctly")_ [Ebook]