Bryntum Gantt

Power demos

Advanced

Shows a Gantt chart with many advanced options enabled

Big data set

Shows a Gantt chart with a large project and the option to generate a new dataset with an arbitrary size

Gantt + Scheduler Pro

Shows Gantt and Scheduler Pro sharing a project

Gantt + TaskBoard

thin

Shows Gantt and TaskBoard sharing a project

Portfolio planning with the Gantt chart

Shows how to visualize multiple projects in a portfolio inside a single Gantt chart

Realtime updates in Gantt

Shows changes made by other clients in real time

Features

Basic setup

Shows the most simple Gantt setup - add a Gantt chart to your app in less than 30 lines of code

Auto-apply constraints to pin tasks

Loads a simple dataset where there is no information pinning the task to its startDate. Without the Project `autoSetConstraints`, tasks are scheduled as-soon-as-possible, meaning the project start date

Aggregation column

Shows how to aggregate values in a column

Construction

Shows project, resource and task cost values

Advanced filtering

Shows how to use FieldFilterPickerGroup for advanced filtering of a Gantt chart, synchronized with the Gantt Filter feature

Baselines

Illustrates usage of baselines

Highlighting task non-working time

Shows how to assign and visualize task calendars

Cell selection

Shows how cell selection features works in Gantt, including CellCopyPaste and FillHandle

Collapsible columns

A Gantt chart with collapsible grouped columns in its grid section

Critical paths

Illustrates usage of the critical paths visualization feature

Dependencies

Shows how to customize the Dependency drawing feature

Early render vs legacy render

Allows comparing the new early rendering mode used by default in Gantt to the old legacy mode

Facet filtering

Shows a filter panel that can filter to specific data values

Filtering

Shows the FilterBar feature which adds filter fields to the column headers

Fixed Columns

Fix important columns to always keep them in view

Grouping

Uses the TreeGroup feature to group the task tree by transforming the data

Grid Sections

The Bryntum Gantt chart lets you add multiple, individually scrollable grid sections. You can pin an extra section to the right of the schedule

Highlight time spans

Help end users understand the scheduling rules by visualizing the task scheduling boundaries

Inactive tasks

Shows inactive tasks behavior in the Gantt

Indicators

Demo shows built-in and custom date indicators on the task rows

Infinite timeline scrolling

Shows a infinitely scrollable Gantt chart

Labels

Shows extra informational labels docked round tasks

Multiple Gantt charts

Shows how to add multiple Gantt charts with synchronized timeline scrolling

Parent area

Shows a layer highlighting the area encapsulating all child tasks

Pin successors during drag drop

Shows how to move a task while keeping successors in place

Progress line

Shows project progress line

Responsive

Shows how Gantt can be easily made responsive using a combination of configs and styling

Rollups

Shows how to display rollups

Scheduling conflict resolution popup

Shows the Gantt chart´s built-in conflict resolution popup in action. It is displayed after a cyclic structure, constraint violation to let the user decide what to do

Scroll buttons

Shows a sticky button that scrolls the task into view quickly

Sparse index for tasks

This example demonstrates the sparse index feature in a Gantt chart

Split tasks

Shows the tasks split to segments that can be dragged and resized individually

Static mode

Shows the Engine static mode when certain fields automatic calculation is disabled which allows to load dirty data as-is

Storing and restoring state

This example demonstrates auto state handling for the gantt. It allows the user to store state in localStorage and restore it across page reloads

Stretch tasks to fill ticks

Shows the fillTicks config, which stretches tasks to fill ticks and adjusts non working time ranges to also fit the ticks

Summary feature

This example shows the summary feature

Time Ranges

Highlight important dates or time spans in the schedule

Time zone support

Shows how time zone support can be implemented

Undo/Redo

Shows a Gantt setup with undo/redo

Versions

Shows a Gantt setup with versioning

WBS

Shows the use of WBS column in a Gantt setup

Planned percent done column

Illustrates the planned percent done column usage

Relative timeaxis

Shows how to show a relative timeaxis with integers instead of dates

Postponed conflicts

Shows an option to postpone resolution of certain scheduling conflicts and how to use custom constraints logic

S-curve

Demonstrates how the Gantt chart can show a customizable s-curve

Charts

Chart designer

thin

Shows how to use a chart designer widget to configure and display a chart from Gantt data

Export & import

Export to Excel

This demo shows a custom solution of exporting Scheduler data to Excel without involving the server based on a third party library called write-excel-file (https://www.npmjs.com/package/write-excel-file)

Export to MS Project

This demo shows a custom solution of exporting Gantt data to Microsoft Project without involving the server

Import MS Project & Primavera P6 files

Shows how to import projects from MS Project and Primavera P6

Export to ICS

This demo shows how to export tasks to ICS format (iCal)

Export to PDF / PNG

Demonstrates how the Gantt chart can be exported to PDF/PNG

Print

Demonstrates how to print component using browser print dialog

Customization

Customizing task bar contents

Shows how to customize the rendering of the Gantt chart

Custom time axis header

You can easily define any number of header rows for the time axis

Customizing the resource assignment picker

Shows how to enhance the resource assignment picker

Customized task bar

Shows how to render a number value for each time axis tick below the task bar

Customizing layers

Shows how to move the different layers along the z-axis

Customized UI to support single resource assignment

Shows the most simple way to implement single assignment in the Gantt chart

Customizing the task editor with a rich text editor

Shows how to customize the task editor, using a TinyMCE field for the Notes tab

Customizing the task menu

Shows how to customize the items of the TaskMenu

Customizing the task styling

Shows how using eventColor affects appearance

Customized tooltips

Shows how to customize the task tooltip

Localization

All demos allows you to switch locale, but this demo has a german locale in addition

Theme browser

Try the included SASS themes

Custom Theme

This demo has a custom theme, to showcase how you can create your own. Check the resources/ folder to see how it is done

Drag drop

Drag resources from a grid

This example shows how easy it is to assign tasks to resources by dragging a resource from an external grid onto tasks in the Gantt chart

Drag resources from utilization panel

This example shows you can assign tasks to resources by dragging a resource from the utilization grid onto tasks in the Gantt chart

Drag unplanned tasks from a grid

This example shows how easy it is to drag tasks from a separate list or grid onto the Gantt chart

Additional widgets

Resource histogram widget

Shows a resource allocation histogram below a Gantt

Resource utilization widget

Shows a resource utilization grid with editable resource assignment values below a Gantt chart

Timeline widget

Shows the Timeline widget for important tasks

Integration

Replace the task menu

A custom task menu implemented with Bootstrap

Include in CSP page

Shows the Gantt chart in CSP page

Include using EcmaScript module

This example shows how to include and use Gantt using EcmaScript modules (import)

JointJS Charts integration

Shows how to integrate Bryntum Gantt with JointJS Charts

Backend in PHP

The demo features existing advanced demo with sample PHP backend

Integrate with Salesforce Lightning

This demo shows how to embed Bryntum Gantt into the Lightning Web Component to use in your salesforce org

Include using a script tag

This example shows how to include and use the Gantt bundle using an ordinary script tag

Use as web component

This example shows how to use the Custom elements version of the gantt. Currently following browsers support custom elements: Chrome, Firefox, Opera, Safari

ASP.NET

Shows Gantt with .NET backend

ASP.NET Core

Shows Gantt with .NET Core backend

Integrate with Ionic

Ionic 5

Angular 10

TypeScript 3

This demo is based on the Ionic framework and uses Bryntum Gantt chart wrappers for Angular

Custom build using WebPack

WebPack 5

This very basic demo shows how to use GanttBase and webpack to do a custom build from our sources

Custom thin build using WebPack

WebPack 5

thin

This very basic demo shows how to use GanttBase and webpack to do a custom build from our thin packages

Angular

examples/frameworks/angular

Advanced

Angular 13

TypeScript 4

This demo shows an advanced configuration of the Bryntum Angular Gantt chart in an Angular app

Inline data for Angular View Engine

Angular 11

TypeScript 4

Shows how to bind inline data to the Angular Gantt component

Baselines

Angular 13

TypeScript 4

Illustrates usage of baselines

Basic thin setup

Angular 16

TypeScript 5

thin

This example shows basic setup of the Bryntum Gantt using thin npm packages

Drag from a grid

Angular 15

TypeScript 4

This example shows how easy it is to drag tasks from a separate list or grid onto the Gantt chart

Gantt + Resource Utilization

Angular 14

TypeScript 4

Shows how to use the angular Gantt chart wrapper partnered with Resource Utilization

Gantt + Scheduler Pro

Angular 13

TypeScript 4

Shows how to use the Angular Gantt chart wrapper partnered with Scheduler Pro

Inline data

Angular 13

TypeScript 4

Shows how to bind inline data to the Angular Gantt component

PDF/PNG export

Angular 15

TypeScript 4

This demo shows how to use export to PDF/PNG feature with the Angular Gantt control

Rollups

Angular 15

TypeScript 4

Shows how to display rollups using the Angular Gantt component

Task editor customization

Angular 13

TypeScript 4

This demo shows how to customize the Angular Gantt chart´s task editor by adding a tab with attached files

Time ranges

Angular 15

TypeScript 4

Highlight important dates or time spans in the schedule using the Angular Gantt component wrapper

Undo/Redo

Angular 13

TypeScript 4

Shows a Gantt setup with undo/redo

React + Vite

examples/frameworks/react-vite

Baselines

React 19

Vite 6

TypeScript 5

Illustrates usage of baselines

Basic setup

React 18

Vite 5

TypeScript 5

This demo contains the React Gantt chart wrapper and the demo is written in TypeScript

Basic thin setup

React 18

Vite 5

TypeScript 5

thin

This example shows basic setup of the Bryntum Gantt using thin npm packages

Gantt + Scheduler Pro

React 19

Vite 6

TypeScript 5

This demo shows how to use the React Gantt wrapper partnered with Scheduler Pro

Advanced

React 18

Vite 5

TypeScript 5

This demo shows how to use Bryntum Gantt chart React wrapper in an advanced configuration

Inline data

React 19

Vite 7

TypeScript 5

Shows how to bind inline data to the React component. The demo is written in TypeScript

PDF/PNG export

React 19

Vite 7

TypeScript 5

This demo shows how to export the React Gantt component to PDF

rollups

React 19

Vite 7

TypeScript 5

This example shows how to display rollups in the React Gantt widget

timeline

React 19

Vite 7

TypeScript 5

Shows the React Gantt chart combined with Timeline widget

Time ranges

React 19

Vite 7

TypeScript 5

This example shows how to highlight important dates or time spans in the schedule in the React Gantt component

Undo/Redo

React 18

Vite 5

TypeScript 5

This demo shows a Gantt setup with undo/redo

React

examples/frameworks/react

Resource Histogram

React 17

This demo shows how to use Resource Histogram part of the React Gantt chart component

Task editor customization

React 16

Shows how to customize the task editor in the React Gantt chart wrapper

Redux toolkit

React 18

This demo contains a basic usage of React Redux Toolkit on Gantt

SharePoint Workbench with TypeScript

React 17

TypeScript 4

thin

This demo contains a Basic React Gantt example. The demo is written in TypeScript

React + Next.js

examples/frameworks/react-nextjs

Basic setup with NEXT.js app router

React 18

NextJS 13

TypeScript 5

This demo contains the React Gantt chart wrapper and the demo is written in Next.js using the App Router

Basic setup with NEXT.js pages router

React 18

NextJS 13

TypeScript 5

This demo contains the React Gantt chart wrapper and the demo is written in Next.js using the Pages Router

React + Remix

Basic setup

React 18

Remix 2

Vite 5

TypeScript 5

This demo contains the React Gantt chart wrapper and the demo is written in Remix using Typescript

Vue 3 + Vite

examples/frameworks/vue-3-vite

Basic setup

Vue 3

Vite 5

TypeScript 5

This example shows basic setup of the Bryntum Gantt

Basic thin setup

Vue 3

Vite 5

TypeScript 5

thin

This example shows basic setup of the Bryntum Gantt using thin npm packages

Undo/Redo

Vue 3

Vite 5

TypeScript 5

This demo shows a Gantt setup with undo/redo

Vue 3

examples/frameworks/vue-3

Baselines

Vue 3

Illustrates usage of baselines

Gantt + Scheduler Pro

Vue 3

This demo shows how to use Bryntum Gantt partnered with Scheduler Pro in Vue 3

Inline data

Vue 3

Shows how to bind inline data to the Vue 3 component

Simple setup

Vue 3

Shows a simple Gantt chart integration with Vue 3

Vue 2

examples/frameworks/vue-2

Advanced

Vue 2

This demo shows how to use the Vue Gantt chart control in an advanced configuration

Cell Renderer

Vue 2

Demo of Bryntum Gantt for Vue with column renderers outputting Vue components into cells

Gantt + Scheduler Pro

Vue 2

This demo shows how to use the Vue Gantt component partnered with Scheduler Pro

Inline data

Vue 2

Shows how to bind inline data to the Vue Gantt component

PDF/PNG export

Vue 2

Shows how to use the PDF export feature of the Vue Gantt component wrapper

Rollups

Vue 2

Shows how to display rollups in the Vue chart widget

Task editor customization

Vue 2

Shows how to customize the task editor in the Vue Gantt component

Time ranges

Vue 2

Shows how to display time ranges in the Vue Gantt chart component