React Gantt Chart

Overview

The React Gantt is a UI component that illustrates a project schedule. It allows users to plan, organize and track various tasks. Users can also see how different tasks are related and what task is dependent on other tasks in the project plan. Tasks have a visual bar to indicate their start and end date, how long each task should take to complete, how far along a particular task is, whether the task is on-time or late and much more.

See React Gantt Chart Overview demo

React Gantt Chart Component Overview

Sorting

With sorting enabled, the React Gantt can reorganize all available tasks to be sorted by a specific data field, such as task start date or task type. Sorting can be enabled via a single configuration option and users can sort by clicking the header of a field. Clicking multiple times allows users to sort the items in an ascending order, descending order or no sort order at all, giving them the option to remove any applied sorting. React developers can also programmatically set sorting and sort order, which means columns can be sorted upon initial render.

See React Gantt Sorting demo

React Gantt Component Sorting

Filtering

Thanks to the built-in filtering options of the KendoReact Gantt component, users can quickly reduce the number of tasks displayed at once. Filtering can be done via a dedicated filter menu or by using fields such as text and dates as filters. Additionally, you can configure conditional filters, such as “starts with”, “contains” and more, on a column-by-column basis to give users maximum flexibility to manage their planning.

See React Gantt Filtering demo

React Gantt Component Filtering

Data Binding

The React Gantt component can bind all its tasks and their dependencies through local or remote data, letting React developers pick their favored approach for binding data on the client in order to populate the KendoReact Gantt.

Flat Data

Due to the complex nature of the Gantt component, it often requires a more advanced data structure. To make data binding easier for React developers, the KendoReact Gantt provides a helper method for converting flat data into the data type that the Gantt expects. This provides additional flexibility for developers to bind data without having to restructure their data just for the Gantt component.

See React Gantt Flat Data demo

Task Types

The React Gantt provides a short list of tags to organize the different types of tasks. These include a “summary” task, a task which has child tasks, a “regular” task, a task without child items, or a “milestone” task, which is a task without child items that has the same start and end date.

See React Gantt Task Types demo

React Gantt Component Task Types

Dependency Types

To easily manage the relationships between different tasks, the KendoReact Gantt component provides four different dependency types: the “finish to finish” type, the “finish to start” type, the “start to start” type, and the “start to finish” type. Using these dependency types, React developers can ensure that their tasks are properly defined in their Gantt component and users can plan projects in the correct sequence of events.

See React Gantt Dependency Types demo

React Gantt Component Dependency Types

Editing

Designed as a fully-fledged project management and collaboration tool, the KendoReact Gantt component enables users to easily manipulate and edit available tasks. . Thanks to the available callbacks and configuration options, developers can either rely on the out-of-the-box editing capability of the Gantt component, or customize the user experience to fit any specific design requirements.

See React Gantt Editing demo

React Gantt Component Editing

Row Height

Every task in the React Gantt component is represented by a row. With the Row Height property, the Gantt can be customized to provide either a more compact view or rows with more padding in order to fit the existing content.

See React Gantt Row Height demo

React Gantt Component Row Height

Slots Customization

Since the React Gantt component is meant to help manage projects, and no two projects are the same, there may be a need for more granular control over the intervals that tasks are displayed over. Whether tasks are done by the minute or by the day or week, or if the requirements call for shorter or longer slot widths, the duration of these slots and the width can be controlled across the entire KendoReact Gantt.

See React Gantt Slots Customization demo

React Gantt Component Slot Customization

Time Zones

Dates and time are a central part of the KendoReact Gantt component. Whenever time is involved, time zones can significantly complicate matters. With the built-in support for time zones, the React Gantt component makes this complex situation a breeze to deal with. If no specific time zone is set, the KendoReact Gantt component defaults to the local time zone of the browser. If a time zone is set, then the Gantt component will display all tasks according to that time zone.

See React Gantt Time Zones demo

Keyboard Navigation

The React Gantt component comes with built-in keyboard support to help navigate and interact with the UI component using just a keyboard.

See React Gantt Keyboard Navigation demo

Globalization

Many apps written with KendoReact require support for right-to-left, or RTL, writing systems. With the KendoReact Gantt, RTL support can be achieved with a single property setting.

See React Gantt Globalization demo

React Gantt Accessibility

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.