Power demos
Shows a Gantt chart with many advanced options enabled
Shows a Gantt chart with a large project and the option to generate a new dataset with an arbitrary size
Shows Gantt and Scheduler Pro sharing a project
Shows Gantt and TaskBoard sharing a project
Shows how to visualize multiple projects in a portfolio inside a single Gantt chart
Shows changes made by other clients in real time
Features
Shows the most simple Gantt setup - add a Gantt chart to your app in less than 30 lines of code
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
Shows how to aggregate values in a column
Shows project, resource and task cost values
Shows how to use FieldFilterPickerGroup for advanced filtering of a Gantt chart, synchronized with the Gantt Filter feature
Illustrates usage of baselines
Shows how to assign and visualize task calendars
Shows how cell selection features works in Gantt, including CellCopyPaste and FillHandle
A Gantt chart with collapsible grouped columns in its grid section
Illustrates usage of the critical paths visualization feature
Shows how to customize the Dependency drawing feature
Allows comparing the new early rendering mode used by default in Gantt to the old legacy mode
Shows a filter panel that can filter to specific data values
Shows the FilterBar feature which adds filter fields to the column headers
Fix important columns to always keep them in view
Uses the TreeGroup feature to group the task tree by transforming the data
The Bryntum Gantt chart lets you add multiple, individually scrollable grid sections. You can pin an extra section to the right of the schedule
Help end users understand the scheduling rules by visualizing the task scheduling boundaries
Shows inactive tasks behavior in the Gantt
Demo shows built-in and custom date indicators on the task rows
Shows a infinitely scrollable Gantt chart
Shows extra informational labels docked round tasks
Shows how to add multiple Gantt charts with synchronized timeline scrolling
Shows a layer highlighting the area encapsulating all child tasks
Shows how to move a task while keeping successors in place
Shows project progress line
Shows how Gantt can be easily made responsive using a combination of configs and styling
Shows how to display rollups
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
Shows a sticky button that scrolls the task into view quickly
This example demonstrates the sparse index feature in a Gantt chart
Shows the tasks split to segments that can be dragged and resized individually
Shows the Engine static mode when certain fields automatic calculation is disabled which allows to load dirty data as-is
This example demonstrates auto state handling for the gantt. It allows the user to store state in localStorage and restore it across page reloads
Shows the fillTicks config, which stretches tasks to fill ticks and adjusts non working time ranges to also fit the ticks
This example shows the summary feature
Highlight important dates or time spans in the schedule
Shows how time zone support can be implemented
Shows a Gantt setup with undo/redo
Shows a Gantt setup with versioning
Shows the use of WBS column in a Gantt setup
Illustrates the planned percent done column usage
Shows how to show a relative timeaxis with integers instead of dates
Shows an option to postpone resolution of certain scheduling conflicts and how to use custom constraints logic
Demonstrates how the Gantt chart can show a customizable s-curve
Charts
Shows how to use a chart designer widget to configure and display a chart from Gantt data
Export & import
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)
This demo shows a custom solution of exporting Gantt data to Microsoft Project without involving the server
Shows how to import projects from MS Project and Primavera P6
This demo shows how to export tasks to ICS format (iCal)
Demonstrates how the Gantt chart can be exported to PDF/PNG
Demonstrates how to print component using browser print dialog
Customization
Shows how to customize the rendering of the Gantt chart
You can easily define any number of header rows for the time axis
Shows how to enhance the resource assignment picker
Shows how to render a number value for each time axis tick below the task bar
Shows how to move the different layers along the z-axis
Shows the most simple way to implement single assignment in the Gantt chart
Shows how to customize the task editor, using a TinyMCE field for the Notes tab
Shows how to customize the items of the TaskMenu
Shows how using eventColor affects appearance
Shows how to customize the task tooltip
All demos allows you to switch locale, but this demo has a german locale in addition
Try the included SASS themes
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
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
This example shows you can assign tasks to resources by dragging a resource from the utilization grid onto tasks in the Gantt chart
This example shows how easy it is to drag tasks from a separate list or grid onto the Gantt chart
Additional widgets
Shows a resource allocation histogram below a Gantt
Shows a resource utilization view below a Gantt chart
Shows the Timeline widget for important tasks
Integration
A custom task menu implemented with Bootstrap
Shows the Gantt chart in CSP page
This example shows how to include and use Gantt using EcmaScript modules (import)
ExtJS 6.5.3
Example of a Bryntum Gantt embedded in an ExtJS Modern application. Read more about ExtJS here: https://www.sencha.com
Shows how to integrate Bryntum Gantt with JointJS Charts
The demo features existing advanced demo with sample PHP backend
This demo shows how to embed Bryntum Gantt into the Lightning Web Component to use in your salesforce org Web Component to use in your salesforce org.
This example shows how to include and use the Gantt bundle using an ordinary script tag
This example shows how to use the Custom elements version of the gantt. Currently following browsers support custom elements: Chrome, Firefox, Opera, Safari
Shows Gantt with .NET backend
Shows Gantt with .NET Core backend
Ionic 5
Angular 10
TypeScript 3
This demo is based on the Ionic framework and uses Bryntum Gantt chart wrappers for Angular.
WebPack 5
This very basic demo shows how to use GanttBase and webpack to do a custom build from our sources
WebPack 5
This very basic demo shows how to use GanttBase and webpack to do a custom build from our thin packages
Angular
examples/frameworks/angular
Angular 13
TypeScript 4
This demo shows an advanced configuration of the Bryntum Angular Gantt chart in an Angular app
Angular 11
TypeScript 4
Shows how to bind inline data to the Angular Gantt component
Angular 13
TypeScript 4
Illustrates usage of baselines
Angular 16
TypeScript 5
Shows how to bind inline data to the Angular Gantt component
Angular 15
TypeScript 4
This example shows how easy it is to drag tasks from a separate list or grid onto the Gantt chart
Angular 14
TypeScript 4
Shows how to use the angular Gantt chart wrapper partnered with Resource Utilization
Angular 13
TypeScript 4
Shows how to use the Angular Gantt chart wrapper partnered with Scheduler Pro
Angular 13
TypeScript 4
Shows how to bind inline data to the Angular Gantt component
Angular 15
TypeScript 4
This demo shows how to use export to PDF/PNG feature with the Angular Gantt control
Angular 15
TypeScript 4
Shows how to display rollups using the Angular Gantt component
Angular 13
TypeScript 4
This demo shows how to customize the Angular Gantt chart´s task editor by adding a tab with attached files
Angular 15
TypeScript 4
Highlight important dates or time spans in the schedule using the Angular Gantt component wrapper
Angular 13
TypeScript 4
Shows a Gantt setup with undo/redo
React + Vite
examples/frameworks/react-vite
React 19
Vite 6
TypeScript 5
Illustrates usage of baselines
React 18
Vite 5
TypeScript 5
This demo contains the React Gantt chart wrapper and the demo is written in TypeScript
React 18
Vite 5
TypeScript 5
This demo contains the thin React Gantt chart wrapper
React 19
Vite 6
TypeScript 5
This demo shows how to use the React Gantt wrapper partnered with Scheduler Pro
React 18
Vite 5
TypeScript 5
This demo shows how to use Bryntum Gantt chart React wrapper in an advanced configuration
React 19
Vite 7
TypeScript 5
Shows how to bind inline data to the React component. The demo is written in TypeScript
React 19
Vite 7
TypeScript 5
This demo shows how to export the React Gantt component to PDF
React 19
Vite 7
TypeScript 5
This example shows how to display rollups in the React Gantt widget
React 19
Vite 7
TypeScript 5
Shows the React Gantt chart combined with Timeline widget
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
React 18
Vite 5
TypeScript 5
This demo shows a Gantt setup with undo/redo
React
examples/frameworks/react
React 17
This demo shows how to use Resource Histogram part of the React Gantt chart component
React 16
Shows how to customize the task editor in the React Gantt chart wrapper
React 18
This demo contains a basic usage of React Redux Toolkit on Gantt
React 17
TypeScript 4
This demo contains a Basic React Gantt example. The demo is written in TypeScript
React + Next.js
examples/frameworks/react-nextjs
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
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
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
Vue 3
Vite 5
TypeScript 5
This example shows basic setup of the Bryntum Gantt
Vue 3
Vite 5
TypeScript 5
This example shows basic setup of the Bryntum Gantt
Vue 3
Vite 5
TypeScript 5
This demo shows a Gantt setup with undo/redo
Vue 3
examples/frameworks/vue-3
Vue 3
Illustrates usage of baselines
Vue 3
This demo shows how to use Bryntum Gantt partnered with Scheduler Pro in Vue 3
Vue 3
Shows how to bind inline data to the Vue 3 component
Vue 3
Shows a simple Gantt chart integration with Vue 3
Vue 2
examples/frameworks/vue-2
Vue 2
This demo shows how to use the Vue Gantt chart control in an advanced configuration
Vue 2
Demo of Bryntum Gantt for Vue with column renderers outputting Vue components into cells
Vue 2
This demo shows how to use the Vue Gantt component partnered with Scheduler Pro
Vue 2
Shows how to bind inline data to the Vue Gantt component
Vue 2
Shows how to use the PDF export feature of the Vue Gantt component wrapper
Vue 2
Shows how to display rollups in the Vue chart widget
Vue 2
Shows how to customize the task editor in the Vue Gantt component
Vue 2
Shows how to display time ranges in the Vue Gantt chart component