React

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.

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.

Try the Redux Demo

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.

View docs

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.

View Bryntum React wrappers


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

export const App = () => {
    return (
        <div>
            <BryntumGantt
            {...ganttConfig}
            // other props, event handlers, etc
        />
        </div>
    );
}

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.

View example

React Gantt chart examples

Advanced functionality

Resource histogram

Inline data

View React examples

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.

View all features

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.

View demo

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:

View demo