Bryntum Gantt
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
thin
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
AI
Demonstrates the Bryntum AI Assistant integrated with the Gantt
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
Demonstrates smooth zooming with zoom controls, TimeZoomSlider, and Gantt tasks
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
thin
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 Gantt 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
Plan a 2027 Mars rocket launch by dragging unscheduled tasks from an AG Grid panel onto the Bryntum Gantt chart
Additional widgets
Shows a resource allocation histogram below a Gantt
Shows a resource utilization grid with editable resource assignment values below a Gantt chart
Shows the Timeline widget for important tasks
Misc
thin
Comprehensive showcase of all the widgets included in the Bryntum package. Browse through text fields, date pickers, buttons, layouts, and more
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
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
WebPack 5
This very basic demo shows how to use GanttBase and webpack to do a custom build from our sources
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
Angular 21
TypeScript 5
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
thin
This example shows basic setup of the Bryntum Gantt using thin npm packages
Angular 21
TypeScript 6
Shows how to render a number value for each time axis tick below the task bar
Angular 21
TypeScript 6
A custom task menu implemented with Bootstrap
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 21
TypeScript 6
The Bryntum Gantt chart lets you add multiple, individually scrollable grid sections. You can pin an extra section to the right of the schedule
Angular 21
TypeScript 6
Help end users understand the scheduling rules by visualizing the task scheduling boundaries
Angular 21
TypeScript 6
Shows inactive tasks behavior in the Gantt
Angular 21
TypeScript 6
Demo shows built-in and custom date indicators on the task rows
Angular 13
TypeScript 4
Shows how to bind inline data to the Angular Gantt component
Angular 21
TypeScript 6
Shows extra informational labels docked round tasks
Angular 21
TypeScript 6
All demos allow you to switch locale, but this demo has a German locale in addition
Angular 21
TypeScript 6
This demo shows a custom solution of exporting Gantt data to Microsoft Project without involving the server
Angular 21
TypeScript 6
Shows how to add multiple Gantt charts with synchronized timeline scrolling
Angular 21
TypeScript 6
Shows a layer highlighting the area encapsulating all child tasks
Angular 15
TypeScript 4
Demonstrates how the Gantt chart can be exported to PDF/PNG
Angular 21
TypeScript 6
Shows how to move a task while keeping successors in place
Angular 21
TypeScript 6
Illustrates the planned percent done column usage
Angular 21
TypeScript 6
Shows how to visualize multiple projects in a portfolio inside a single Gantt chart
Angular 21
TypeScript 6
Shows an option to postpone resolution of certain scheduling conflicts and how to use custom constraints logic
Angular 21
TypeScript 6
Demonstrates how to print component using browser print dialog
Angular 21
TypeScript 6
Shows project progress line
Angular 21
TypeScript 6
Shows how to show a relative timeaxis with integers instead of dates
Angular 21
TypeScript 6
Shows how to enhance the resource assignment picker
Angular 21
TypeScript 6
Shows a resource allocation histogram below a Gantt
Angular 21
TypeScript 6
Shows a resource utilization grid with editable resource assignment values below a Gantt chart
Angular 15
TypeScript 4
Shows how to display rollups using the Angular Gantt component
Angular 21
TypeScript 6
Demonstrates how the Gantt chart can show a customizable s-curve
Angular 21
TypeScript 6
Shows the possibility to schedule some tasks in backward direction (ALAP scheduling)
Angular 21
TypeScript 6
Shows a sticky button that scrolls the task into view quickly
Angular 21
TypeScript 6
Shows the most simple way to implement single assignment in the Gantt chart
Angular 21
TypeScript 6
Shows the tasks split to segments that can be dragged and resized individually
Angular 21
TypeScript 6
This example demonstrates auto state handling for the gantt. It allows the user to store state in localStorage and restore it across page reloads
Angular 21
TypeScript 6
This example shows the summary feature
Angular 21
TypeScript 6
Shows how to customize the task editor, using a TinyMCE field for the Notes tab
Angular 21
TypeScript 6
Shows how to customize the items of the TaskMenu
Angular 21
TypeScript 6
Shows how using eventColor affects appearance
Angular 21
TypeScript 6
Try the included SASS themes
Angular 21
TypeScript 6
Shows the Angular Gantt chart combined with Timeline widget
Angular 21
TypeScript 6
This example shows how to highlight important dates or time spans in the schedule in the Angular Gantt component
Angular 21
TypeScript 6
Shows how time zone support can be implemented
Angular 21
TypeScript 6
Shows how to customize the task tooltip
Angular 13
TypeScript 4
Shows a Gantt setup with undo/redo
Angular 21
TypeScript 6
Shows the use of WBS column in a Gantt setup
Angular 21
TypeScript 6
Demonstrates smooth zooming with zoom controls, TimeZoomSlider, and Gantt tasks
React + Vite
examples/frameworks/react-vite
React 19
Vite 6
TypeScript 5
Illustrates usage of baselines
React 19
Vite 8
TypeScript 6
This demo contains the React Gantt chart wrapper and the demo is written in TypeScript
React 18
Vite 5
TypeScript 5
thin
This example shows basic setup of the Bryntum Gantt using thin npm packages
React 19
Vite 7
TypeScript 5
This demo shows a Gantt chart with a big data set using a custom React component as task renderer
React 19
Vite 8
TypeScript 6
Shows how to render a number value for each time axis tick below the task bar
React 19
Vite 8
TypeScript 6
A custom task menu implemented with Bootstrap
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 8
TypeScript 6
The Bryntum Gantt chart lets you add multiple, individually scrollable grid sections. You can pin an extra section to the right of the schedule
React 19
Vite 8
TypeScript 6
Help end users understand the scheduling rules by visualizing the task scheduling boundaries
React 19
Vite 8
TypeScript 6
Shows inactive tasks behavior in the Gantt
React 19
Vite 8
TypeScript 6
Demo shows built-in and custom date indicators on the task rows
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 8
TypeScript 6
Shows extra informational labels docked round tasks
React 19
Vite 8
TypeScript 6
All demos allow you to switch locale, but this demo has a German locale in addition
React 19
Vite 8
TypeScript 6
This demo shows a custom solution of exporting Gantt data to Microsoft Project without involving the server
React 19
Vite 8
TypeScript 6
Shows how to add multiple Gantt charts with synchronized timeline scrolling
React 19
Vite 8
TypeScript 6
Shows a layer highlighting the area encapsulating all child tasks
React 19
Vite 7
TypeScript 5
Demonstrates how the Gantt chart can be exported to PDF/PNG
React 19
Vite 8
TypeScript 6
Shows how to move a task while keeping successors in place
React 19
Vite 8
TypeScript 6
Illustrates the planned percent done column usage
React 19
Vite 8
TypeScript 6
Shows how to visualize multiple projects in a portfolio inside a single Gantt chart
React 19
Vite 8
TypeScript 6
Shows an option to postpone resolution of certain scheduling conflicts and how to use custom constraints logic
React 19
Vite 8
TypeScript 6
Demonstrates how to print component using browser print dialog
React 19
Vite 8
TypeScript 6
Shows how to enhance the resource assignment picker
React 19
Vite 8
TypeScript 6
Shows a resource allocation histogram below a Gantt
React 19
Vite 7
TypeScript 5
This example shows how to display rollups in the React Gantt widget
React 19
Vite 8
TypeScript 6
Demonstrates how the Gantt chart can show a customizable s-curve
React 19
Vite 8
TypeScript 6
Shows a resource utilization grid with editable resource assignment values below a Gantt chart
React 19
Vite 8
TypeScript 6
Shows the possibility to schedule some tasks in backward direction (ALAP scheduling)
React 19
Vite 8
TypeScript 6
Shows a sticky button that scrolls the task into view quickly
React 19
Vite 8
TypeScript 6
Shows the most simple way to implement single assignment in the Gantt chart
React 19
Vite 8
TypeScript 6
Shows the tasks split to segments that can be dragged and resized individually
React 19
Vite 8
TypeScript 6
This example demonstrates auto state handling for the gantt. It allows the user to store state in localStorage and restore it across page reloads
React 19
Vite 8
TypeScript 6
This example shows the summary feature
React 19
Vite 8
TypeScript 6
Shows how to customize the task editor, using a TinyMCE field for the Notes tab
React 19
Vite 8
TypeScript 6
Shows how to customize the items of the TaskMenu
React 19
Vite 8
TypeScript 6
Shows how using eventColor affects appearance
React 19
Vite 8
TypeScript 6
Try the included SASS themes
React 19
Vite 7
TypeScript 5
Shows the React Gantt chart combined with Timeline widget
React 19
Vite 8
TypeScript 6
This example shows how to highlight important dates or time spans in the schedule in the React Gantt component
React 19
Vite 8
TypeScript 6
Shows how time zone support can be implemented
React 19
Vite 8
TypeScript 6
Shows how to customize the task tooltip
React 18
Vite 5
TypeScript 5
This demo shows a Gantt setup with undo/redo
React 19
Vite 8
TypeScript 6
Shows project progress line
React 19
Vite 8
TypeScript 6
Shows how to show a relative timeaxis with integers instead of dates
React 19
Vite 8
TypeScript 6
Shows the use of WBS column in a Gantt setup
React 19
Vite 8
TypeScript 6
Demonstrates smooth zooming with zoom controls, TimeZoomSlider, and Gantt tasks
React
examples/frameworks/react
React 18
This demo contains a basic usage of React Redux Toolkit on Gantt
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
React 18
NextJS 15
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 15
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 8
TypeScript 6
This example shows basic setup of the Bryntum Gantt
Vue 3
Vite 5
TypeScript 5
thin
This example shows basic setup of the Bryntum Gantt using thin npm packages
Vue 3
Vite 8
TypeScript 6
Shows how to render a number value for each time axis tick below the task bar
Vue 3
Vite 8
TypeScript 6
A custom task menu implemented with Bootstrap
Vue 3
Vite 8
TypeScript 6
The Bryntum Gantt chart lets you add multiple, individually scrollable grid sections. You can pin an extra section to the right of the schedule
Vue 3
Vite 8
TypeScript 6
Help end users understand the scheduling rules by visualizing the task scheduling boundaries
Vue 3
Vite 8
TypeScript 6
Shows inactive tasks behavior in the Gantt
Vue 3
Vite 8
TypeScript 6
Demo shows built-in and custom date indicators on the task rows
Vue 3
Vite 8
TypeScript 6
Shows extra informational labels docked round tasks
Vue 3
Vite 8
TypeScript 6
All demos allow you to switch locale, but this demo has a German locale in addition
Vue 3
Vite 8
TypeScript 6
This demo shows a custom solution of exporting Gantt data to Microsoft Project without involving the server
Vue 3
Vite 8
TypeScript 6
Shows how to add multiple Gantt charts with synchronized timeline scrolling
Vue 3
Vite 8
TypeScript 6
Shows a layer highlighting the area encapsulating all child tasks
Vue 3
Vite 8
TypeScript 6
Demonstrates how the Gantt chart can be exported to PDF/PNG
Vue 3
Vite 8
TypeScript 6
Shows how to move a task while keeping successors in place
Vue 3
Vite 8
TypeScript 6
Illustrates the planned percent done column usage
Vue 3
Vite 8
TypeScript 6
Shows how to visualize multiple projects in a portfolio inside a single Gantt chart
Vue 3
Vite 8
TypeScript 6
Shows an option to postpone resolution of certain scheduling conflicts and how to use custom constraints logic
Vue 3
Vite 8
TypeScript 6
Demonstrates how to print component using browser print dialog
Vue 3
Vite 8
TypeScript 6
Shows project progress line
Vue 3
Vite 8
TypeScript 6
Shows how to show a relative timeaxis with integers instead of dates
Vue 3
Vite 8
TypeScript 6
Shows how to enhance the resource assignment picker
Vue 3
Vite 8
TypeScript 6
Shows a resource allocation histogram below a Gantt
Vue 3
Vite 8
TypeScript 6
Shows a resource utilization grid with editable resource assignment values below a Gantt chart
Vue 3
Vite 8
TypeScript 6
This example shows how to display rollups in the Vue 3 Gantt widget
Vue 3
Vite 8
TypeScript 6
Demonstrates how the Gantt chart can show a customizable s-curve
Vue 3
Vite 8
TypeScript 6
Shows the possibility to schedule some tasks in backward direction (ALAP scheduling)
Vue 3
Vite 8
TypeScript 6
Shows a sticky button that scrolls the task into view quickly
Vue 3
Vite 8
TypeScript 6
Shows the most simple way to implement single assignment in the Gantt chart
Vue 3
Vite 8
TypeScript 6
Shows the tasks split to segments that can be dragged and resized individually
Vue 3
Vite 8
TypeScript 6
This example demonstrates auto state handling for the gantt. It allows the user to store state in localStorage and restore it across page reloads
Vue 3
Vite 8
TypeScript 6
This example shows the summary feature
Vue 3
Vite 8
TypeScript 6
Shows how to customize the task editor, using a TinyMCE field for the Notes tab
Vue 3
Vite 8
TypeScript 6
Shows how to customize the items of the TaskMenu
Vue 3
Vite 8
TypeScript 6
Shows how using eventColor affects appearance
Vue 3
Vite 8
TypeScript 6
Try the included SASS themes
Vue 3
Vite 8
TypeScript 6
Shows the Vue Gantt chart combined with Timeline widget
Vue 3
Vite 8
TypeScript 6
This example shows how to highlight important dates or time spans in the schedule in the Vue 3 Gantt component
Vue 3
Vite 8
TypeScript 6
Shows how time zone support can be implemented
Vue 3
Vite 8
TypeScript 6
Shows how to customize the task tooltip
Vue 3
Vite 5
TypeScript 5
This demo shows a Gantt setup with undo/redo
Vue 3
Vite 8
TypeScript 6
Shows the use of WBS column in a Gantt setup
Vue 3
Vite 8
TypeScript 6
Demonstrates smooth zooming with zoom controls, TimeZoomSlider, and Gantt tasks
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 3 + Nuxt
Vue 3
NuxtJS 4
Vite 5
This example shows basic setup of the Gantt in Nuxt
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 time ranges in the Vue Gantt chart component