Bryntum Gantt

Power demos

Advanced demo - Shows a Gantt chart with many advanced options enabled.
Big data set demo - Shows a Gantt chart with a large project and the option to generate a new dataset with an arbitrary size
Bryntum Gantt + Scheduler Pro demo - Shows Gantt and Scheduler Pro sharing a project
Bryntum Gantt + TaskBoard demo - Shows Gantt and TaskBoard sharing a project

Features

Basic Gantt chart demo - Shows the most simple Gantt setup - add a Gantt chart to your app in less than 30 lines of code.
Aggregation column demo - Shows how to aggregate values in a column
Advanced filtering demo - Shows how to use FieldFilterPickerGroup for advanced filtering of a Gantt chart, synchronized with the Gantt Filter feature.
Baselines demo - Illustrates usage of baselines
Task calendars demo - Shows how to assign and visualize task calendars
Gantt cell selection demo - Shows how cell selection features works in Gantt, including CellCopyPaste and FillHandle
Collapsible group headers demo - A Gantt chart with collapsible grouped columns in its grid section
Critical paths demo - Illustrates usage of the critical paths visualization feature
Early rendering demo - Allows comparing the new early rendering mode used by default in Gantt to the old legacy mode
Facet filtering demo - Shows a filter panel that can filter to specific data values
Filtering tasks - Shows the FilterBar feature which adds filter fields to the column headers.
Gantt chart with fixed columns - Fix important columns to always keep them in view.
Grouping demo - Uses the TreeGroup feature to group the task tree by transforming the data.
Extra 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.
Highlighting time spans - Help end users understand the scheduling rules by visualizing the task scheduling boundaries
Inactive tasks demo - Shows inactive tasks behavior in the Gantt
Indicators demo - Demo shows built in and custom date indicators on the task rows
Infinite scroll demo - Shows a infinitely scrollable Gantt chart
Labels demo - Shows extra informational labels docked round tasks
Parent area highlight - Shows a layer highlighting the area encapsulating all child tasks
Pin successors demo - Shows how to move a task while keeping successors in place
Progress line demo - Shows project progress line
Responsive demo - Shows how Gantt can be easily made responsive using a combination of configs and styling.
Rollups demo - Shows how to display rollups
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.
Split tasks demo - Shows the tasks split to segments that can be dragged and resized individually
Static demo - Shows the Engine static mode when certain fields automatic calculation is disabled which allows to load dirty data as-is
Gantt state demo - This example demonstrates auto state handling for the gantt. It allows the user to store state in localStorage and restore it across page reloads
Fill ticks demo - Shows the fillTicks config, which stretches tasks to fill ticks and adjusts non working time ranges to also fit the ticks
Summary demo - This example shows the summary feature.
Time ranges demo - Highlight important dates or time spans in the schedule
Time zone demo - Shows how time zone support can be implemented
Undo/Redo demo - Shows a Gantt setup with undo/redo
Versioning demo - Shows a Gantt setup with versioning
Gantt WBS demo - Shows the use of WBS column in a Gantt setup.

Export & import

Export Gantt 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 zipcelx (https://www.npmjs.com/package/zipcelx)
Export Gantt to Microsoft Project - This demo shows a custom solution of exporting Gantt data to Microsoft Project without involving the server
MS Project and Primavera P6 import demo - Shows how to import projects from MS Project and Primavera P6
Export to PDF demo - Demonstrates how the Gantt chart can be exported to PDF/PNG

Customization

Custom time axis header - You can easily define any number of header rows for the time axis
Custom task bar rendering - Shows how to put custom HTML inside the task bar
Customizing the resource assignment picker - Shows how to enhance the resource assignment picker
Custom task bar - Shows how to render a number value for each time axis tick below the task bar
Task editor customization demo - Shows how to customize the task editor
Task context menu demo - Shows how to customize the items of the TaskMenu
Task coloring demo - Shows how using eventColor affects appearance
Tooltips demo - Shows how to customize the task tooltip
Localization demo - All demos allows you to switch locale, but this demo has a german locale in addition.
Theme demo - Try the included SASS themes

Drag drop

Drag resources from a grid demo - 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 onto tasks - This example shows you can assign tasks to resources by dragging a resource from the utilization grid onto tasks in the Gantt chart.
Drag from a grid demo - This example shows how easy it is to drag tasks from a separate list or grid onto the Gantt chart.

Additional widgets

Gantt with resource histogram demo - Shows a resource allocation histogram below a Gantt
Resource utilization view - Shows a resource utilization view below a Gantt chart
Timeline demo - Shows the Timeline widget for important tasks

Integration

Custom Task menu demo - A custom task menu implemented with Bootstrap
Content Security Policy demo - Shows the Gantt chart in CSP page.
EcmaScript module demo - This example shows how to include and use Gantt using EcmaScript modules (import)
ExtJS Modern App integration demo - Example of a Bryntum Gantt embedded in an ExtJS Modern application. Read more about ExtJS here: <a href='https://www.sencha.com/products/extjs' style='color: white; font-weight: bold'>https://www.sencha.com</a>
PHP demo - The demo features existing advanced demo with sample PHP backend.
Salesforce demo - This demo shows how to embed Bryntum Gantt into the Lightning Web Component to use in your salesforce org.
Script tag demo - This example shows how to include and use the Gantt bundle using an ordinary script tag.
Web Components demo - This example shows how to use the Custom elements version of the gantt. Currently following browsers support custom elements: Chrome, Firefox, Opera, Safari.
.NET demo - Shows Gantt with .NET backend
.NET demo - Shows Gantt with .NET backend
Custom build using WebPack - This very basic demo shows how to use webpack to do a custom build from our sources.
Gantt + Ionic - This demo is based on the Ionic framework and uses Bryntum Gantt chart wrappers for Angular.