Bryntum Gantt

What is Bryntum Gantt?

Welcome to Bryntum Gantt - the most reliable and feature-complete JavaScript Gantt chart component.

Bryntum Gantt is a full-featured gantt component with a rich, clean and comprehensively documented API and many ways to customize and extend it. It is accessible, responsive and supports touch devices.

Bryntum Gantt is built using modern web techniques on a well documented, comprehensive set of core UI components. It is designed from the ground up to be responsive and mobile-friendly, while still being a powerful tool for desktop users.

It is internationalized with support for 45 locales out of the box, and this can be easily extended.

It is themed using modern CSS techniques and includes a number of preconfigured themes, each of which may be switched between light and dark mode. All aspects of the appearance may be customized using CSS variables.

For more general information on our Gantt product, please read on. This documentation provides you with everything you need to get started.

If you are excited to have a go now, we suggest you to start with one of our quick start guides below:

Vue

Features

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

Live demo

Try out some of the Bryntum Gantt features with the live demo below.

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 runs in all modern browsers (Chrome, Firefox, Safari, and modern 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
Sass: >=

You can use Bryntum Gantt out of the box or integrate it with the framework of your choice and many third-party solutions. Visit the integration section of our documentation for further details:

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.

How does it work?

The Bryntum Gantt consists of two parts. The first part is the project data, consisting of tasks, dependencies, resources, assignments, and calendars. The second part is the visualization, the User Interface for the project data.

Project Data

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

The component will perform everything under the hood for you. Defaults suit most situations, but you can also customize the scheduling rules with specific business logic if needed!

The scheduling engine is self-contained/headless, designed to be compatible with a server-side Node.js environment. It is a built-in dependency and should require no additional installation or configuration. The documentation for this part of the codebase is available in Bryntum Scheduling Engine API Docs.

Visualisation and UI

The visualisation and user interface part of the Gantt is based on Bryntum Grid and is written in plain JavaScript. So you can use most Grid features like for instance filtering, sorting or summarizing in the Gantt too. For more information about Grid capabilities, please visit the Grid Component documentation.

In a traditional setup, you will want to use frozen grid columns to the left and let the Gantt Timeline (which is a specialised grid) occupy the rest of the available space with a horizontal scrollbar to scroll the timeline. You can also associate as many extra grids as needed to improve even more the user experience.

Next steps

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

React

Angular

Vue

Vanilla JS