Bryntum Gantt (Trial)

Bryntum Gantt is a full-featured Gantt chart for project management with support for a wide range of features. It integrates smoothly with React, Vue, Angular, or plain vanilla JS.

For more information about Bryntum Gantt, visit the Bryntum Gantt site

Highlights

• Best-in-class scheduling engine handles asynchronous scheduling with dependencies and constraints - runs in browser or server-side on Node.js
• Critical path analysis and conflict resolution for maintaining project integrity
• Handles large datasets with smooth virtual rendering and instant updates
• Baselines and progress tracking with S-curve visualization
• Customizable task editor with custom tabs and resource assignment picker
• Custom taskbar rendering with styles, labels, and tooltips
• Resource histogram and utilization tracking
• Export to Excel, MS Project, PDF/PNG, and ICS calendar formats
• Portfolio planning with multiple projects and WBS numbering
• Version control and undo/redo functionality
• PERT chart integration and compatibility with other Bryntum components
• React, Vue, and Angular wrappers with native framework patterns

Package Contents

| Path | Description | |---------------------------------------|------------------------------------------------| | fonts/ | Poppins, Montserrat, and RobotoFlex fonts | | fontawesome/ | FontAwesome icons and webfonts | | locales/ | Localization files for 30+ languages | | gantt.module.js, gantt.umd.js | JavaScript bundles (ES module and UMD formats) | | gantt.css | Structural CSS (required) | | *.d.ts | TypeScript type definitions | | *.css | Theme stylesheets |

Note: Trial packages do not include minified bundles, source maps, or source files.

Supported Versions

• 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

Try Bryntum Online Demos

Explore our comprehensive collection of demos:

• View Online Demos
• JavaScript Demos
• React Demos
• Vue Demos
• Angular Demos

Installation

This is a trial package with limited functionality.

Why Use npm Aliasing?

Trial packages use npm aliasing to install @bryntum/gantt-trial under the @bryntum/gantt name. This approach provides a seamless upgrade path - when you purchase a license, you only need to update the alias in package.json without changing any application code.

Install using npm:

npm install @bryntum/gantt@npm:@bryntum/gantt-trial@latest

Or using yarn:

yarn add @bryntum/gantt@npm:@bryntum/gantt-trial@latest

Alternatively, add to package.json dependencies:

"dependencies": {
  "@bryntum/gantt": "npm:@bryntum/gantt-trial@latest"
}

Visit our npm repository guide to learn more about installation and migrating from trial to licensed packages.

Quick Start

Vanilla JavaScript

import { Gantt } from '@bryntum/gantt';
import './style.css';

const gantt = new Gantt({
    appendTo  : 'app',
    startDate : new Date(2022, 0, 1),
    endDate   : new Date(2022, 0, 10),
    columns   : [
        { type : 'name', width : 160 }
    ],
    project : {

        // Automatically introduces a `startnoearlier` constraint for tasks that (a) have no predecessors,
        // (b) do not use constraints and (c) aren't `manuallyScheduled`
        autoSetConstraints : true,
        tasks              : [
            {
                id       : 1,
                name     : 'Documentation Project',
                expanded : true,
                children : [
                    {
                        id       : 2,
                        name     : 'Preparation',
                        expanded : true,
                        children : [
                            { id : 6, name : 'Proof-read docs', startDate : '2026-01-02', endDate : '2026-01-09' },
                            { id : 3, name : 'Release docs', startDate : '2026-01-09', endDate : '2026-01-10' }
                        ]
                    },
                    {
                        id       : 4,
                        name     : 'Development',
                        expanded : true,
                        children : [
                            { id : 7, name : 'Write API docs', startDate : '2026-01-05', endDate : '2026-01-12' },
                            { id : 8, name : 'Write tutorials', startDate : '2026-01-10', endDate : '2026-01-16' },
                            { id : 9, name : 'Create examples', startDate : '2026-01-12', endDate : '2026-01-18' }
                        ]
                    },
                    {
                        id       : 5,
                        name     : 'Review & Release',
                        expanded : true,
                        children : [
                            { id : 10, name : 'Team review', startDate : '2026-01-18', endDate : '2026-01-20' },
                            { id : 11, name : 'Final approval', startDate : '2026-01-20', endDate : '2026-01-21' },
                            { id : 12, name : 'Public release', startDate : '2026-01-22', endDate : '2026-01-22' }
                        ]
                    }
                ]
            }
        ],
        dependencies : [
            { fromTask : 6, toTask : 3 },
            { fromTask : 7, toTask : 8 },
            { fromTask : 8, toTask : 9 },
            { fromTask : 9, toTask : 10 },
            { fromTask : 10, toTask : 11 },
            { fromTask : 11, toTask : 12 }
        ]
    }
});

In the style.css:

/* FontAwesome is used for icons */
@import "@bryntum/gantt/fontawesome/css/fontawesome.css";
@import "@bryntum/gantt/fontawesome/css/solid.css";
/* Structural CSS */
@import "@bryntum/gantt/gantt.css";
/* Bryntum theme of your choice */
@import "@bryntum/gantt/svalbard-light.css";

Visit our JavaScript Quick Start guide to learn more.

Themes

Svalbard (default)

| Light | Dark | |--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------| | | |

Stockholm

| Light | Dark | |----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------| | | |

Visby

| Light | Dark | |--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------| | | |

Material 3

| Light | Dark | |-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------| | | |

High Contrast

| Light | Dark | |------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------| | | |

Fluent 2

| Light | Dark | |-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------| | | |

For more information on customizing themes, see the Styling guide.

Framework Integrations

Bryntum Gantt provides first-class wrappers for popular frameworks. Each wrapper follows native framework patterns and lifecycle management.

Note: The framework wrappers are public and can be installed normally. They require the core package to be present.

React

npm install @bryntum/gantt-react@latest

Visit our React Quick Start guide to learn more.

Angular

npm install @bryntum/gantt-angular@latest

Visit our Angular Quick Start guide to learn more.

Vue 3

npm install @bryntum/gantt-vue-3@latest

Visit our Vue Quick Start guide to learn more.

Explore All Bryntum Products

• Bryntum Grid - High-performance data grid
• Bryntum Scheduler - Resource scheduling component
• Bryntum Scheduler Pro - Advanced scheduling with dependencies
• Bryntum Gantt - Project planning and management
• Bryntum Calendar - Full-featured calendar component
• Bryntum TaskBoard - Kanban-style task management

Explore our comprehensive collection of demos:

| Product | JavaScript | React | Vue | Angular | |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:| | Grid | Grid JavaScript demos | Grid React demos | Grid Vue demos | Grid Angular demos | | Scheduler | Scheduler JavaScript demos | Scheduler React demos | Scheduler Vue demos | Scheduler Angular demos | | Scheduler Pro | Scheduler Pro JavaScript demos | Scheduler Pro React demos | Scheduler Pro Vue demos | Scheduler Pro Angular demos | | Gantt | Gantt JavaScript demos | Gantt React demos | Gantt Vue demos | Gantt Angular demos | | Calendar | Calendar JavaScript demos | Calendar React demos | Calendar Vue demos | Calendar Angular demos | | TaskBoard | TaskBoard JavaScript demos | TaskBoard React demos | TaskBoard Vue demos | TaskBoard Angular demos |

Online references

• Bryntum Gantt documentation

• Bryntum Gantt examples

• Bryntum Support Forum

• Contact us

License and copyright

Bryntum Gantt is commercial software and requires a paid license. Please visit the Bryntum Gantt End User License for the full text of the license.

Copyright © 2009-2026, Bryntum All rights reserved.