The fastest React Gantt chart library

The Bryntum React Gantt chart is a super-fast and fully customizable Gantt chart component for your React application.

Install Apache Configure Ports Configure Firewall Configure Ports Availability

Get started with clear documentation

Effortless integration with the Redux Toolkit

The Bryntum React Gantt chart easily integrates with Redux for state management and has a highly efficient rendering engine for excellent scrolling and rescheduling performance – even with large data sets.

React Gantt chart code example


Get a Bryntum React Gantt chart component up and running in just a few minutes using either TypeScript or JavaScript. The following is an App.jsx example.

import { BryntumGantt } from "@bryntum/gantt-react";
import './App.css'

function App() {
  const ganttConfig = {
    columns: [{ type: 'name', field: 'name', width: 250 }],
    project: {
      tasksData: [
        { id: 1, name: 'Proof-read docs', startDate: '2024-01-02', endDate: '2024-01-09' },
        { id: 2, name: 'Release docs', startDate: '2024-01-09', endDate: '2024-01-10' }

  return ;

export default App

Reuse components and simplify syntax with JSX

Use JSX to keep rendering logic and markup together and ensure they stay in sync. Bryntum React Gantt supports using simple inline JSX and JSX in a custom React component. 

Use any conditional logic with the Bryntum React Gantt column renderer to output visually rich cell content.

Efficient and lightweight React wrappers

Use our React wrappers for advanced Gantt chart functionality using familiar React syntax. 

Wrappers define a BryntumGantt React component you can use the same way as other React components, giving you full access to Bryntum API widget class configs, properties, events, and features.

import { BryntumGantt } from '@bryntum/gantt-react';
import { ganttConfig } from './AppConfig'

export const App = () => {
    return (
            // other props, event handlers, etc

Define task constraints for the React Gantt chart timeline

Easily add task constraints in the Bryntum React Gantt chart for granular control over how tasks are scheduled. 

  • Start no earlier than
  • Start no later than
  • Finish no earlier than
  • Finish no later than
  • Must start on
  • Must finish on

Customizable React Gantt chart Task Editor

The Bryntum React Gantt has a built-in Task Editor that you can easily extend and customize. Change the visible fields and add your own custom tabs.

Best-in-class scheduling engine with React

The Bryntum React Gantt engine provides asynchronous scheduling of any number of tasks by taking task dependencies, constraints, and scheduling modes into account. The Bryntum React Gantt engine is implemented independently from the DOM and can also be run on a node server.

Animated redraws

When you move a task, the result is animated into place so you can easily follow how an update affects other tasks.

React Gantt chart features

Apply the React control wrapper to your Bryntum Gantt for additional features. Bryntum React Gantt chart features include the task editor, configurable tooltips, and resource assignment editor.

The Bryntum documentation describes all the technical details of the Bryntum React Gantt chart.

Render custom HTML

Render custom HTML in the Bryntum React Gantt taskbar element for an enhanced, elegant interface. Include a customization menu to toggle UI settings during runtime and personalize the user experience.


Fully customizable and themeable React Gantt chart

Choose from five different themes for your Bryntum React Gantt chart, or make your own by extending our standard themes. Bryntum React Gantt ships with five themes:

Try it yourself!

Trusted by the world’s leading companies

Ready to get started?