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
Portfolio planning demo - Shows how to visualize multiple projects in a portfolio inside a single Gantt chart
Gantt realtime updates demo - Shows changes made by other clients in real time

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.
Auto-pinning tasks that lack constraints - 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 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
Dependencies demo - Shows how to customize the Dependency drawing 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
Multiple Gantt charts demo - Shows how to add multiple Gantt charts with synchronized timeline scrolling.
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.
Scroll Buttons demo - Shows a sticky button that scrolls the task into view quickly.
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.
Planned percent done demo - Illustrates the planned percent done column usage
Relative timeaxis demo - Shows how to show a relative timeaxis with integers instead of dates.
Postponed conflicts and custom constraints logic demo - Shows an option to postpone resolution of certain scheduling conflicts and how to use custom constraints logic
S-Curve demo - Demonstrates how the Gantt chart can show a customizable s-curve

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 write-excel-file (https://www.npmjs.com/package/write-excel-file)
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 tasks to iCal/ICS - This demo shows how to export tasks to ICS format (iCal)
Export to PDF demo - Demonstrates how the Gantt chart can be exported to PDF/PNG
Print demo - Demonstrates how to print component using browser print dialog

Customization

Custom rendering - 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
Custom task bar - Shows how to render a number value for each time axis tick below the task bar
Layers demo - Shows how to move the different layers along the z-axis
Gantt single assignment concept demo - Shows the most simple way to implement single assignment in the Gantt chart.
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
Custom theme demo - 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 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>
JointJS Charts integration - Shows how to integrate Bryntum Gantt with JointJS Charts
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
Gantt + Ionic - This demo is based on the Ionic framework and uses Bryntum Gantt chart wrappers for Angular.
Custom build using WebPack - This very basic demo shows how to use GanttBase and webpack to do a custom build from our sources
Custom build using WebPack and thin bundles - This very basic demo shows how to use GanttBase and webpack to do a custom build from our thin packages