Getting Started with KendoReact Gantt

The KendoReact Gantt component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-gantt package.


The Gantt displays a set of tasks and dependencies which are used to visualize project-planning data.

It provides a tree-list section where the user can sort and filter the tasks in a grid-like fashion, and a time-line section where the tasks and dependencies are visualized under an adjustable time ruler. The Gantt also supports the display of the time-line section in the day, week, month and year views.

The following example demonstrates the KendoReact Gantt component in action.

View Source
Edit In Stackblitz  
Change Theme:

Basic Configuration

The KendoReact Gantt provides interface for configuration of the task models fields - GanttTaskModelFields, and interface for the dependency models fields - GanttDependencyModelFields.


  1. Download and install the package. Use Node.js v5.0.0 or later.

    npm install --save @progress/kendo-react-gantt @progress/kendo-date-math @progress/kendo-drawing @progress/kendo-data-query @progress/kendo-react-intl @progress/kendo-react-treelist @progress/kendo-react-data-tools @progress/kendo-react-dateinputs @progress/kendo-react-inputs @progress/kendo-react-dropdowns @progress/kendo-react-buttons @progress/kendo-licensing
  2. Once installed, import the package module.

    // ES2015 module syntax
    import { Gantt } from '@progress/kendo-react-gantt';
    // CommonJS format
    const { Gantt } = require('@progress/kendo-react-gantt');
  3. You are required to install one of the Kendo UI themes to style your components. For more information on how to add the styles, refer to the article on getting started.

  4. Follow the instructions on the KendoReact My License page to activate your license. You can skip this step if your application already contains a KendoReact license file.


The Gantt package requires the following peer dependencies that have to be installed by your application:

  • react 16.8.2*
  • react-dom
  • @progress/kendo-data-query
  • @progress/kendo-date-math
  • @progress/kendo-drawing
  • @progress/kendo-licensing
  • @progress/kendo-react-buttons
  • @progress/kendo-react-data-tools
  • @progress/kendo-react-dateinputs
  • @progress/kendo-react-dropdowns
  • @progress/kendo-react-inputs
  • @progress/kendo-react-intl
  • @progress/kendo-react-treelist

Functionality and Features