Bryntum Gantt

What is Bryntum Gantt?

The most reliable and feature-complete Gantt chart component built with vanilla JavaScript and TypeScript, Bryntum Gantt easily integrates with any backend or UI framework, including React, Vue, and Angular.

Bryntum Gantt offers a wide range of features, such as:

Task scheduling using dependencies and constraints
Powerful calendars for projects, tasks, and resources
Advanced scheduling using recurring and fixed time intervals
Customization to tailor rendering and styling to suit your needs
Enhanced user experience with a selection of column types and task editors to choose from
Built-in performance tuning to handle extensive data sets

The easiest way to start using Bryntum Gantt is by installing it using npm.

Get up and running quickly with a step-by-step guide:

React quick start

Angular quick start

Vue quick start

Vanilla JS quick start

Salesforce quick start

Bryntum Gantt live demo

Explore Bryntum Gantt and test some of its features in the live demo.

For a complete overview of Bryntum Gantt capabilities, explore the topic-specific guides in the menu, visit our API documentation, and browse Bryntum Gantt examples.

Continuous evolution and improvement

Maintenance releases with bug fixes are released on average every two weeks, with minor releases every quarter. See the public change log

Keep up to date with developments on our blog

Integration

Bryntum Gantt is compatible with all modern browsers – including Chrome, Firefox, Safari, and the latest version of Edge – regardless of your target technology.

Before integrating Bryntum Gantt with any framework, ensure that your environment meets the following version requirements:

NodeJS: >= 20.0.0
TypeScript: >= 3.6.0
Angular: >= 9.0.0
React: >= 16.0.0
Vue: >= 3.0.0
Ionic: >= 5.0.0
Vite: >= 4.0.0
Webpack: >= 4.0.0

Use Bryntum Gantt out of the box or integrate it with your framework of your choice and many third-party solutions.

If you have already downloaded Bryntum Gantt, you'll find framework examples in the examples/frameworks folder. If you haven't downloaded Bryntum Gantt yet, you can get a free trial here. You can get started using the Bryntum trial npm packages, which are public.

How does it work?

The Bryntum Gantt consists of two parts:

Project data, including tasks, dependencies, resources, assignments, and calendars.
Visualization, the user interface that displays and interacts with the data.

Comprehensive project data management

Bryntum Gantt is one of a kind. Built on top of ChronoGraph, an open-source reactive computational engine developed by Bryntum, its scheduling engine matches Microsoft Project logic and supports projects of any size.

The Bryntum Gantt component handles all the underlying processes for you and the default settings work well for most situations. Scheduling rules can be customized with tailored business logic when necessary.

The scheduling engine is self-contained and headless, designed to be compatible with a server-side Node.js environment. As a built-in dependency, it needs no additional installation or configuration.

Read more about the Bryntum Scheduling Engine in the API documentation.

User interface and data visualization

The Bryntum Gantt user interface is based on Bryntum Grid and implemented in plain JavaScript, allowing you to use many Bryntum Grid features like filtering, sorting, and summarizing in the Gantt, too. For more information about Bryntum Grid capabilities, see the Bryntum Grid documentation.

A traditional Bryntum Gantt setup uses frozen grid columns on the left with the Gantt timeline, a specialized grid, occupying the remaining available space. A horizontal scrollbar allows users to scroll the timeline. You can connect additional grids to the Gantt to enhance the user experience.

Next steps

The best way to get started with Gantt is by following one of our quick start guides, which provides step-by-step instructions. Once you're familiar with the basics, continue with the in-depth tutorial to explore advanced features. Choose your preferred technology below to begin:

React

Angular

Vue

Vanilla JS