TreeGrid GanttChart

Interactive JavaScript Gantt chart and row-based bar chart module built on top of TreeGrid

Display and edit complex project schedules and resource timelines with the full power of TreeGrid.

Gantt Example Why GanttChart Gantt & Bar

GanttChart

Grid Specifications Bar Example

Live Examples Download Demo Contact

Why GanttChart

Comprehensive Project Management

Full-featured Gantt chart and bar chart solution for project scheduling, resource management and task tracking directly in the browser.

Interactive Scheduling

Drag-and-drop tasks and dependencies, automatic scheduling, critical path analysis, resource allocation and real-time updates for complex project plans.

Resource Management

Bar chart capabilities for service and resource management, multiple bars per task, overlap detection and detailed utilization tracking.

Highly Customizable

Advanced Gantt and bar chart features with configurable headers, styles, tooltips, API events and extensive configuration options.

Powerful TreeGrid Integration

Built on TreeGrid's proven grid engine: tree structures, sorting, grouping, filtering and all advanced grid capabilities available for Gantt.

Cross-Platform Support

Runs in all modern browsers and on mobile devices. Compatible with Angular, React, Vue and other JavaScript frameworks.

Main Gantt Chart Features

Powerful project management and scheduling capabilities

Project Management

Enterprise-level project scheduling

Designed for project management - tasks planning and scheduling.

Web application core with functionality similar to MS Project or Oracle Primavera

Automatic task scheduling based on dependencies and calendars.

Manual task scheduling controlled by toolbar buttons or API calls.

Critical path calculation and visualization.

Gantt objects

Base interactive objects in chart

Tasks with customizable start, end dates and duration.

Split (discrete) tasks composed of multiple parts, scheduled as one logical task, usable for actual completion representation.

Multiple tasks in one row cell, each scheduled independently.

Milestones to mark key project events, including start and finish milestones.

Flags - custom icons on selected dates with configurable tooltips.

Resources management

Resource types and availability

Task resources with work and material resource types.

Task cost calculation based on resource assignment and duration.

Resource availability and usage charts, standalone or integrated into Gantt chart.

Task filtering by resources.

Calendars

Work time & holidays

Project and work calendars with configurable working hours.

Custom calendars per task defining working hours, holidays and exceptions.

Calendar dates highlighted in the chart using custom colors.

Dependencies

Types of dependencies between tasks

Dependencies between tasks as successors and / or predecessors.

Dependency types: finish-to-start (FS), finish-to-finish (FF), start-to-start (SS), start-to-finish (SF). Multiple dependencies between two tasks (SS + FF).

Dependency lags in all time units (hours, days, elapsed days, etc.)

Dependency floats as available dependency span for automatic scheduling.

Circular dependencies detection.

Incorrect dependencies highlighted.

Create and modify dependencies by dragging between tasks.

Display & Zoom

Header, background and chart scale

Fully customizable Gantt headers with multiple time units and formats.

Multiple Gantt headers on top, bottom in the grid center.

Highlight specific dates or ranges in background or foreground.

Zoom in/out of the Gantt chart for different time scales.

Smooth zoom over a selected date range.

Custom zoom levels with configurable unit size, width and visual style.

RTL version for Middle East languages including Hijri dates and calendar.

Constraints

Extended scheduling

Project start and finish date constraints.

Schedule tasks as soon as possible (ASAP) or as late as possible (ALAP).

Task date constraints: early start (SNET), early finish (FNET), late start (SNLT), late finish (FNLT) and mandatory start (MSO) and mandatory end (MFO).

Date constraints represented as interactive icons and changeable via drag & drop.

Interactivity

User interface

Interactive editing: drag & drop for rescheduling tasks and other objects.

Fully customizable behavior using key and mouse action schemes.

Customizable context menus for quick access to common operations.

Automatic validation of changes in chart and automatic error correction.

API & Events

Extensive programming interface

Rich API for programmatic control of all Gantt and bar features.

Event handlers for user actions and data changes.

Hooks for integrating custom business logic.

Data import / export in multiple formats (XML, JSON, XLSX).

Chart chart export to XLSX.

Server-side integration for data persistence.

Printing and PDF export with custom settings.

Comprehensive documentation, examples and tutorials.

Visual Customization

Flexible styling and appearance

Custom styles for tasks, milestones and dependencies.

Color-coding by status, priority or resource.

Progress indicators and percent complete visualization.

Custom tooltips with detailed task information.

Background patterns for weekends and holidays.

Baseline comparison for tracking schedule variance.

"Today" marker line indicating current date.

Theme support for consistent branding across the application.

Main Bar Chart Features

For all row based chart types and calendars

Resource management or calendars

Typical bar chart scenarios

Especially suitable for service or resource management.

Ideal for row-based task calendars.

Usable for any other interactive row-based bar chart.

Multiple independent bars per row cell for complex schedules.

Multiple dependent bars in a row for continuous operations.

Dependent bars automatically moved or resized to avoid overlaps.

Bar types

Features and content

Bar properties: type, width, caption, background, CSS class and tooltip.

Bar options: normal, empty, not movable, not resizable, start / end, ...

Overlapped bars can be wrapped or highlighted or restricted.

Custom HTML content in bars, including dynamic content.

Unique bar identification for manipulation and persistence.

Interactive Editing

Direct manipulation and control

Interactive bars created, resized, moved and deleted by mouse dragging.

All bar settings can be changed from context menu or by API.

Moving bars within a row, between rows, between grids or custom containers.

Joined bars - move joined bars together, split or join bars by dragging.

Bar groups - manipulate multiple bars together, including across rows.

Bar selection - select and edit multiple bars together, including across rows.

Extensions

Use with other Gantt objects and features

Use Gantt header, zoom, dependencies or resources with bar charts.

Display flags, tasks or milestones together with bars in a single cell.

Use all TreeGrid functionality (sort, filter, group, search, print, export) with bar charts.

Special interactive point icon objects for math or event charts.

Complete Web Grid Features

Comprehensive TreeGrid capabilities integrated with Gantt and Bar functionality

Cell Types

Many cell types and their features

Cell types: text, HTML, number, date, checkbox, combo box, image, link, etc.

Editable link and image types.

Radio button cells and their dependencies.

More side icons and buttons in cells.

Switch and popup buttons types.

Upload file cell type.

Calculations & formatting

Cell formats and Excel-like and JavaScript formulas

Full Excel-style editable formula engine with 200+ functions.

Expression-based calculations and custom formulas.

Full JavaScript formulas and calculations in data.

Advanced formatting based on type and format strings.

Conditional formatting with custom rules and conditions.

Advanced Layout

Special grid structure features

Sticky cell text remains visible during horizontal scrolling.

Cell spanning across rows, columns or both directions.

Nested grids - embed another grid inside a cell.

Built-in master & detail grids.

Row, column and cell state colors and indicators.

RTL (right-to-left) display for Middle Eastern languages.

Side and horizontal pagers for navigating large datasets.

Cell hint to show the overflowed cell value in-place.

Synchronized layouts between multiple grids on the same page.

Layout Operations

Rows & columns manipulation

Add, copy and delete rows and columns.

Resize, move and hide row and columns.

Freeze rows and columns on all sides.

Drag rows or columns between grids.

Resize row and column sections and the entire grid.

Span cells dynamically for layout flexibility.

Multiple selection modes: row, column, cell and range.

Copy & paste rows, columns and cell ranges.

Full undo & redo support.

Cell Editing

Excel-like editing and navigation

In-cell editing with Excel-like keyboard navigation.

Single-cell or range cursor.

Auto-complete with suggestions and rules.

Advanced validation via custom rules or regex.

Input masks with regular expressions.

Multi-line editing in text areas

Rich text editing with full formatting and styling.

Permanent edit mode for always-on editing scenarios

Advanced Editing

Extra editing features

Auto-fill and smart fill-down operations.

Copy & paste cells and ranges from and to Excel and other spreadsheets.

Calendar picker for date cells.

Dates dialog for selecting ranges and repeating dates.

Inserting images floating above cells like in Excel.

Manipulating and changing images by mouse dragging.

Entering individual tags visually separated and highlighted.

Tree & Hierarchical Data

Multi-level structures and pivot tables

Unlimited tree hierarchy for rows and columns.

Expand & collapse with keyboard shortcuts.

Dynamic multi level pivot tables with drag & drop configuration.

Editable pivot cells with automatic or custom aggregation

Flexible grouping with automatic or custom aggregation

Tree filtering and search capabilities for hierarchical datasets.

Filtering & Analysis

Advanced filtering, sorting and data analysis

Excel-style auto-filter with checkbox lists.

Expression filtering with custom operators

Global Google-like full-text search.

Custom filter functions and predicates.

Multi-column sorting with custom comparators.

Aggregation functions (sum, average, count, ...).

Statistical analysis and data summaries.

Export & Integration

Export capabilities and framework support

Export to XLSX, CSV, PDF with customizable styling.

Print-ready layouts with multi-page splitting and scaling.

HTML export with full formatting preservation.

Synchronize changes via AJAX, form submits or custom API.

Works with React, Vue, Angular, Svelte and Vanilla JavaScript.

Full TypeScript definitions and IntelliSense support.

Comprehensive API and event system.

Can be used without writing custom JavaScript.

Cross-browser compatibility (Chrome, Firefox, Safari, Edge).

Salesforce LWC & CSP compatibility.

Customization & Theming

Flexible styling and customization

Full theming support with JSON customization.

Built-in themes and custom theme creation.

Responsive design with mobile and touch support.

Customizable toolbar and context menu options.

Customizable cell styling and formatting.

Custom cell renderers and editors.

Styling individual cells by CSS class or HTML prefix / suffix.

Localized to 14 languages, including all texts and date and number formats.

Fully customizable key and mouse navigation action schemes.

Technical Specifications

Supported Browsers

Chrome Edge Safari Firefox Android Samsung Opera

And all Gecko and WebKit / Chromium / Blink engine clones

JavaScript Frameworks

The TreeGrid package includes examples and documentation for use with JavaScript frameworks:

ReactJavaScript / TypeScript AngularTypeScript VueJavaScript / TypeScript SvelteJavaScript / TypeScript EmberJavaScript / TypeScript ExpressJavaScript SalesForce LWCJavaScript OtherHTML, JavaScript

The package can be used in any other client-side framework that supports third-party JavaScript code.

Server-Side Support

The TreeGrid package includes examples and predefined server script code:

NodeJS (JavaScript) ASP.NET (C#, Visual Basic) JSP (Java) PHP HTML (other)

TreeGrid GanttChart can integrate with any backend returning XML or JSON.

Run Bar Example

Transform Your Project Management

TreeGrid GanttChart brings enterprise-level project and resource management to your web application.

Live Examples Download Demo Contact