<br>
<br>

<p align="center">
  <a href="https://bryntum.com/" rel="noopener" target="_blank"><img height="50" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo"></a>
</p>

<br>

# 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](https://bryntum.com/products/gantt/)

<p align="center">
    <img src="https://bryntum.com/products/gantt/examples/meta/thumb.2048.png" alt="Bryntum Gantt Screenshot" width="600">
</p>

## Highlights

* Best-in-class [scheduling engine](https://bryntum.com/products/gantt/examples/advanced) handles asynchronous scheduling with dependencies and constraints - runs in browser or server-side on Node.js
* [Critical path analysis](https://bryntum.com/products/gantt/examples/criticalpaths) and [conflict resolution](https://bryntum.com/products/gantt/examples/conflicts) for maintaining project integrity
* Handles [large datasets](https://bryntum.com/products/gantt/examples/bigdataset) with smooth virtual rendering and instant updates
* [Baselines and progress tracking](https://bryntum.com/products/gantt/examples/baselines) with [S-curve visualization](https://bryntum.com/products/gantt/examples/s-curve)
* [Customizable task editor](https://bryntum.com/products/gantt/examples/taskeditor) with custom tabs and [resource assignment picker](https://bryntum.com/products/gantt/examples/resourceassignment)
* [Custom taskbar rendering](https://bryntum.com/products/gantt/examples/custom-rendering) with styles, labels, and [tooltips](https://bryntum.com/products/gantt/examples/tooltips)
* [Resource histogram](https://bryntum.com/products/gantt/examples/resourcehistogram) and utilization tracking
* Export to [Excel](https://bryntum.com/products/gantt/examples/exporttoexcel), [MS Project](https://bryntum.com/products/gantt/examples/msprojectexport), [PDF/PNG](https://bryntum.com/products/gantt/examples/export), and [ICS](https://bryntum.com/products/gantt/examples/export-to-ics) calendar formats
* [Portfolio planning](https://bryntum.com/products/gantt/examples/portfolio-planning) with multiple projects and WBS numbering
* [Version control](https://bryntum.com/products/gantt/examples/versions) and [undo/redo](https://bryntum.com/products/gantt/examples/undoredo) functionality
* [PERT chart integration](https://bryntum.com/products/gantt/examples/joint-js) and compatibility with other Bryntum components
* [React](https://bryntum.com/products/gantt/examples/?framework=react), [Vue](https://bryntum.com/products/gantt/examples/?framework=vue), and [Angular](https://bryntum.com/products/gantt/examples/?framework=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](https://nodejs.org/en): `>= 20.0.0`
* [TypeScript](https://www.typescriptlang.org/): `>= 3.6.0`
* [Angular](https://angularjs.org/): `>= 9.0.0`
* [React](https://react.dev/): `>= 16.0.0`
* [Vue](https://vuejs.org/): `>= 3.0.0`
* [Ionic](https://ionicframework.com/): `>= 5.0.0`
* [Vite](https://vite.dev/): `>= 4.0.0`
* [Webpack](https://webpack.js.org/): `>= 4.0.0`

## Try Bryntum Online Demos

Explore our comprehensive collection of demos:

* [View Online Demos](https://bryntum.com/products/gantt/examples/)
* [JavaScript Demos](https://bryntum.com/products/gantt/examples/?framework=javascript)
* [React Demos](https://bryntum.com/products/gantt/examples/?framework=react)
* [Vue Demos](https://bryntum.com/products/gantt/examples/?framework=vue)
* [Angular Demos](https://bryntum.com/products/gantt/examples/?framework=angular)

## 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`:

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

Or using `yarn`:

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

Alternatively, add to `package.json` dependencies:

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

Visit our [npm repository guide](https://bryntum.com/products/gantt/docs/guide/Gantt/npm-repository) to learn more about installation and migrating from
trial to licensed packages.

## Quick Start

### Vanilla JavaScript

```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`:

```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](https://bryntum.com/products/gantt/docs/guide/Gantt/quick-start/javascript-npm) to learn more.

## Themes

### Svalbard (default)

| Light                                                                                      | Dark                                                                                     |
|--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=svalbard-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.svalbard-light.png" alt="Svalbard Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=svalbard-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.svalbard-dark.png" alt="Svalbard Dark" width="300"></a> |

### Stockholm

| Light                                                                                        | Dark                                                                                       |
|----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=stockholm-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.stockholm-light.png" alt="Stockholm Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=stockholm-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.stockholm-dark.png" alt="Stockholm Dark" width="300"></a> |

### Visby

| Light                                                                                | Dark                                                                               |
|--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=visby-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.visby-light.png" alt="Visby Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=visby-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.visby-dark.png" alt="Visby Dark" width="300"></a> |

### Material 3

| Light                                                                                         | Dark                                                                                        |
|-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=material3-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.material3-light.png" alt="Material 3 Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=material3-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.material3-dark.png" alt="Material 3 Dark" width="300"></a> |

### High Contrast

| Light                                                                                                | Dark                                                                                               |
|------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=high-contrast-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.high-contrast-light.png" alt="High Contrast Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=high-contrast-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.high-contrast-dark.png" alt="High Contrast Dark" width="300"></a> |

### Fluent 2

| Light                                                                                     | Dark                                                                                    |
|-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=fluent2-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.fluent2-light.png" alt="Fluent 2 Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=fluent2-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.fluent2-dark.png" alt="Fluent 2 Dark" width="300"></a> |

For more information on customizing themes, see the [Styling guide](https://bryntum.com/products/gantt/docs/guide/Gantt/customization/styling).

## 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

```shell
npm install @bryntum/gantt-react@latest
```

Visit our [React Quick Start guide](https://bryntum.com/products/gantt/docs/guide/Gantt/quick-start/react) to learn more.

### Angular

```shell
npm install @bryntum/gantt-angular@latest
```

Visit our [Angular Quick Start guide](https://bryntum.com/products/gantt/docs/guide/Gantt/quick-start/angular) to learn more.

### Vue 3

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

Visit our [Vue Quick Start guide](https://bryntum.com/products/gantt/docs/guide/Gantt/quick-start/vue-3) to learn more.

## Explore All Bryntum Products

* [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
* [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
* [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
* [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
* [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
* [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management

Explore our comprehensive collection of demos:

| Product           |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg" alt="JavaScript" width="30"><br>JavaScript    |  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg" alt="React" width="30"><br>React  |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="30"><br>Vue   | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="30"><br>Angular |
|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
| **Grid**          |         [Grid JavaScript demos](https://bryntum.com/products/grid/examples/?framework=javascript)          |         [Grid React demos](https://bryntum.com/products/grid/examples/?framework=react)          |         [Grid Vue demos](https://bryntum.com/products/grid/examples/?framework=vue)          |         [Grid Angular demos](https://bryntum.com/products/grid/examples/?framework=angular)          |
| **Scheduler**     |    [Scheduler JavaScript demos](https://bryntum.com/products/scheduler/examples/?framework=javascript)     |    [Scheduler React demos](https://bryntum.com/products/scheduler/examples/?framework=react)     |    [Scheduler Vue demos](https://bryntum.com/products/scheduler/examples/?framework=vue)     |    [Scheduler Angular demos](https://bryntum.com/products/scheduler/examples/?framework=angular)     |
| **Scheduler Pro** | [Scheduler Pro JavaScript demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [Scheduler Pro React demos](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [Scheduler Pro Vue demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [Scheduler Pro Angular demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular) |
| **Gantt**         |        [Gantt JavaScript demos](https://bryntum.com/products/gantt/examples/?framework=javascript)         |        [Gantt React demos](https://bryntum.com/products/gantt/examples/?framework=react)         |        [Gantt Vue demos](https://bryntum.com/products/gantt/examples/?framework=vue)         |        [Gantt Angular demos](https://bryntum.com/products/gantt/examples/?framework=angular)         |
| **Calendar**      |     [Calendar JavaScript demos](https://bryntum.com/products/calendar/examples/?framework=javascript)      |     [Calendar React demos](https://bryntum.com/products/calendar/examples/?framework=react)      |     [Calendar Vue demos](https://bryntum.com/products/calendar/examples/?framework=vue)      |     [Calendar Angular demos](https://bryntum.com/products/calendar/examples/?framework=angular)      |
| **TaskBoard**     |    [TaskBoard JavaScript demos](https://bryntum.com/products/taskboard/examples/?framework=javascript)     |    [TaskBoard React demos](https://bryntum.com/products/taskboard/examples/?framework=react)     |    [TaskBoard Vue demos](https://bryntum.com/products/taskboard/examples/?framework=vue)     |    [TaskBoard Angular demos](https://bryntum.com/products/taskboard/examples/?framework=angular)     |

## Online references

* [Bryntum Gantt documentation](https://bryntum.com/products/gantt/docs/)
* [Bryntum Gantt examples](https://bryntum.com/products/gantt/examples/)

* [Bryntum Support Forum](https://forum.bryntum.com/)
* [Contact us](https://bryntum.com/contact/)

## License and copyright

Bryntum Gantt is commercial software and requires a paid license.
Please visit the [Bryntum Gantt End User License](https://bryntum.com/products/gantt/license/) for the full text of the license.

Copyright © 2009-2026, Bryntum
All rights reserved.

