Enterprise-Grade
JavaScript Gantt Chart – DHTMLX Gantt
DHTMLX Gantt is a vendor-maintained JS Gantt chart component optimized for data-heavy
enterprise scenarios and ready for AI-powered development.
enterprise scenarios and ready for AI-powered development.
Create More of Your Product, Less of Your Gantt
With DHTMLX, you leave ownership of complex Gantt functionality to a vendor that accommodates your product's growth and keeps investing in it.
60+ pre-built features
out of the box, and counting
out of the box, and counting
Monthly maintenance releases and bug fixes
Ongoing rendering, data processing, and scheduling optimization
Professional technical support for integration
and implementation
and implementation
Deliver Complex Workflows with DHTMLX JS Gantt Chart
The key DHTMLX Gantt features available out of the box.
Data exchange
Data stays portable across the app and PM tools with import and export support for MS Project, Primavera P6, Excel, PDF, PNG, and other common formats.
Add Resource Leveling to Your Gantt Charts
Extend DHTMLX Gantt
with resource leveling powered
by DHTMLX Planning Engine
with resource leveling powered
by DHTMLX Planning Engine
The engine detects overloaded resources and adjusts task schedules around availability, dependencies, and constraints to build achievable project plans.
Why Enterprises Build with DHTMLX Gantt
Covers Data-Heavy Workloads
Handles up to 100k tasks, with smart rendering and dynamic loading for data-heavy projects.
Customizable for Your Requirements
Allows for tailoring nearly every aspect, from appearance to behavior, featuring rich API, templates, custom HTML content, and CSS variables.
Architecture Fit
Fits into all frontend frameworks and modern browsers, with its Node.js server module bringing Gantt calculations and scheduling logic to the backend.
Meets Accessibility Standards
Complies with WCAG 2.2 AA, Section 508 of the U.S. Rehabilitation Act, and EN 301 549, with WAI-ARIA attributes, keyboard navigation, and high-contrast themes.
Ready for Global Use
Supports 50+ predefined locales with dynamic locale switching, custom locales and RTL support
Designed for Modern AI Workflows
Leverage the DHTMLX Gantt foundation in agentic workflows to embed complex scheduling and project-planning logic at AI-driven velocity.
You can start with the Community edition via npm in any AI coding assistant, such as Claude Code or Cursor, with additional tooling to integrate, customize, and consistently extend Gantt across Community and PRO.
Prompt
Run npm install dhtmlx-gantt and create a project timeline with at least five tasks, dependencies between them, and a progress indicator on each bar. Enable drag-and-drop to reschedule tasks.
DHTMLX JS Gantt Throughout Your System Lifecycle
01
Integrate & Develop
Get all documentation, examples, and support to integrate and customize Gantt.
02
Deploy Predictably
Pay no additional fees for deployment or the number of end users in SaaS apps.
03
Stay Updated
Get Gantt updates and new releases during your active support period.
04
Keep Using
Use DHTMLX Gantt independently, even after your support period ends.
Get More When You Need It
Renew access to Gantt updates or add other DHTMLX products as your system grows.
Framework Integrations with Pre-built Wrappers
Leverage official, ready-to-use wrappers to integrate DHTMLX Gantt into your React, Angular, or Vue.js apps faster,
with less custom integration code to write and maintain.
with less custom integration code to write and maintain.
ASP.NET Core
Svelte
Salesforce
TypeScript
Discover DHTMLX JS Gantt Examples
in Demanding Scenarios
Validated in Real World
DHTMLX Gantt is commonly used in SaaS project management apps, ERP and CRM planning modules, construction scheduling systems, manufacturing and production planning, resource planning, and portfolio management solutions.
DHTMLX Gantt Community vs PRO
| Customization |
|
|
Testimonials
Easy to Integrate, API That Fits
We were looking for a project management plugin to help reduce our time to market and development costs. That is why we are using DHTMLX Gantt. I tested a free version of your Gantt product and I was satisfied with the API provided with the plugin. Your product fitted my needs and it was easy to integrate it into my application.
Thomas Meghe
senior developer at Echo on
The Only Full-Feature Fit
We researched around 6 different Angular libraries for our project's need of Gantt & Scheduler. Only DHTMLX has all the features that we needed. Their support has been excellent to help with our questions promptly.
Jaimin S
director of IT
Well-Documented, Well-Supported
The API is extremely flexible, well documented and easy to understand if you need to look at underlying source code. The support has been responsive and high quality. We would absolutely recommend using DHTMLX and are even considering using some other products that they offer based on our experience so far.
Hive Team
Feature-Rich Out of the Box
It's stable. It's easy to set up, even if you don't have too much development experience. It's highly customizable. It's full of features out of the box (and if something missing, you can write your own addon to cover missing functionality). It's beautiful out of the box, which is not always the case for similar components.
Dmitry (Dan) Dudin
CEO at GanttPRO
High-Performance & Easy to Use
We saw that many samples from DHTMLX were already provided with use cases that were important for us. So, we were quite sure that we could implement the things that we wanted to implement because there were some samples we could work on. We got some key features like grouping by resources, auto-scheduling, undo, but overall it was high performance and ease of using it.
Christoph Hüsson
senior developer at scholz.msconsulting
No Extra Runtime Fees
For Splitvice, dhtmlxGantt fits with what we need. It's a stand-alone component, without an extra run-time fee. It's flexible and highly customizable. We get good support when we need it, but most of our questions are found right in the knowledge database.
Splitvice Team
Drastically Faster Adoption
First off, I really appreciate the various examples of how to utilize their Gantt library and the level of detail in their documentation. Both of these have made adoption drastically faster. As far as features, for the application that I'm working on it requires a Gantt that can support cyclic dependencies and I was happy to see cycles were supported.
Mathew G
cofounder
The Best JS Gantt
Chart Out There
Chart Out There
It's the best Gantt chart out there with no close competitors, contains almost all functionalities needed, has a good support team and quite easy to use, extend and customize.
Sanjay Tripathi
PIMCO
Licensing & Pricing for DHTMLX Gantt PRO
|
Individual | Commercial | Enterprise | Ultimate |
|
Gantt
|
$799 | $1599 | $2999 | $5999 |
|
Gantt + Diagram
(PERT charts included) |
$1038 | $2158 | $4718 | $9438 |
|
Diagram (PERT charts included)
|
$599 | $1299 | $2899 | $5799 |
| License Terms | Read License Agreement | Read License Agreement | Read License Agreement | Read License Agreement |
| Developers | 1 | 5 | 20 | |
| Projects | 1 | 1 | 5 | |
| Use in SaaS (unlimited end-users) | Upon request for a fee | |||
| Use in Salesforce | ||||
| Source code | ||||
| Perpetual distribution rights |
|
Support Plan
|
Standard | Premium | Premium | Ultimate |
| Time Period | 1 year | 1 year | 1 year | 1 year |
| Updates | Major, minor, and maintenance updates | Major, minor, and maintenance updates | Major, minor, and maintenance updates |
Major, minor, and maintenance updates
Priority queue for bug fixing
|
| Support requests | 10 | 30 | 50 | |
| Response time | 72h | 48h | 48h | 24h |
| Personal Account Manager |
|
Functionality
|
PRO | PRO | PRO | PRO |
| 20+ PRO features | ||||
| Online export to PDF/PNG without watermark | Free for 1 year | Free for 1 year | Free for 1 year | Free for 3 years |
| Free local PDF/PNG export module | ||||
| Free local module for MS Project export/import | ||||
| Free Node.js Gantt server module | ||||
| Official React, Angular, and Vue.js wrappers |
Unlock up to 65% Savings with DHTMLX Bundles
DHTMLX Gantt:
Frequently Asked Questions
General
PRO vs Community
Features
Performance
Integrations
Customization
Export and Import
Alternatives
General
What is a Gantt chart in JavaScript?
A Gantt chart JavaScript component is a timeline-based visualization tool used to display tasks, their start and end dates, and the relationship between them. These components help build custom project management and scheduling interfaces with dynamic data and user interaction.
What is DHTMLX Gantt?
DHTMLX Gantt is a JavaScript Gantt chart component for building interactive project timelines and planning tools in web applications. It allows developers to display and edit tasks, dependencies, and project timelines using a configurable grid and time scale. The component includes features for project planning, such as resource management, critical path allocation, and auto-scheduling.
What is DHTMLX Gantt used for?
DHTMLX Gantt is used to build web-based project planning and scheduling tools that visualize tasks on an interactive timeline. As a project management JavaScript library, it helps developers display tasks, dependencies, milestones, and project progress in a structured Gantt chart interface. It also allows users to edit tasks, manage timelines, and organize project workflows directly in the browser. Developers commonly integrate it into web applications to create custom project management and resource planning solutions.
How to install DHTMLX Gantt?
You can install JavaScript Gantt chart functionality with DHTMLX in several ways. The component can be installed via npm (npm i dhtmlx-gantt), downloaded as a package from the DHTMLX website, or included from a CDN in an HTML page. After installation, you should add the Gantt CSS and JavaScript files to your project and initialize the chart in a container element.
Is it suitable for enterprise systems?
DHTMLX Gantt is designed to be used in complex business applications, including enterprise-level solutions. It provides a configurable enterprise Gantt chart component that supports advanced scheduling, task dependencies, resource management, and integration with backend systems. The library can be embedded into large web applications and extended with custom logic to meet specific business requirements.
Can I continue using DHTMLX Gantt after my subscription expires?
DHTMLX Gantt licenses are perpetual, so you can continue using the licensed version after your support period expires. The support plan provides access to product updates and technical support for a limited period, so you can renew it when needed.
PRO vs Community
Is DHTMLX Gantt free?
DHTMLX Gantt is available in both free and paid editions. The free Community Edition is open-source under the MIT license and available on GitHub. It can be used in commercial, SaaS, and open-source projects if the license terms are followed. A 30-day free trial is available for the paid PRO Edition.
What license does DHTMLX Gantt use?
The Community Edition is licensed under MIT, which allows use, modification, and distribution in commercial and open-source projects with attribution. The PRO Edition is distributed under commercial DHTMLX licenses.
What is the difference between the free and paid editions of DHTMLX Gantt?
The Community Edition includes core Gantt chart functionality. The PRO Edition adds advanced project management features such as auto scheduling, critical path calculation, resource management, baselines, deadlines, task constraints, and advanced export/import options. It also includes official technical support and priority handling of bug fixes and technical requests, depending on the plan.
Who should choose the PRO Edition?
The PRO Edition is the right fit for teams with advanced project planning requirements, offering PRO-only features such as auto-scheduling, critical path calculations, resource management, task constraints, working calendars, and baselines. It also includes official technical support and access to product updates, making it a sound choice for production-grade and enterprise applications.
Features
Does DHTMLX Gantt support task dependencies?
Yes, DHTMLX fully supports Gantt chart task dependencies, allowing you to define relationships between tasks such as finish-to-start, start-to-start, finish-to-finish, and start-to-finish. These dependencies automatically adjust task schedules when a related task is moved or updated, helping maintain accurate project timelines.
Can I calculate the critical path?
Yes, DHTMLX Gantt supports calculating the critical path Gantt chart for your projects, identifying the sequence of dependent tasks that directly affect the project’s finish date. This helps managers spot bottlenecks and optimize schedules. The critical path can be highlighted visually in the chart, making it easier to track crucial tasks and adjust timelines effectively.
Does it support milestones?
Yes, DHTMLX Gantt allows you to add Gantt chart milestones to highlight important events, deadlines, or project achievements. Milestones are displayed as distinct points on the timeline, making it easy to track key goals and project progress. They can be fully customized and integrated with tasks and dependencies for comprehensive project planning.
Can I manage resources?
Yes, DHTMLX supports resource management Gantt functionality, allowing you to assign team members or assets to tasks and track their workloads. This helps prevent overbooking, balance task allocation, and visualize resource utilization directly on the Gantt chart.
Does DHTMLX Gantt support baselines?
DHTMLX Gantt's baseline Gantt chart lets you overlay planned schedules on actual progress for clear comparisons. This extra timeline layer helps managers spot deviations, assess delays, and tweak plans effectively.
Can I edit tasks inline?
DHTMLX provides an editable Gantt chart JavaScript interface that allows users to modify tasks directly within the chart. You can update task names, start and end dates, duration, and progress using inline editing, drag-and-drop, or quick forms.
Does it support drag and drop?
Yes, DHTMLX Gantt includes a drag-and-drop Gantt chart feature that lets users move tasks, adjust start and end dates, and change dependencies directly on the timeline. This interactive functionality simplifies project scheduling by allowing real-time updates without manual input.
Can I track project progress?
Yes, DHTMLX Gantt enables robust project progress tracking in JavaScript apps via task progress bars, baseline overlays, and dynamic progress lines from the current date. Developers can configure progress values on tasks for visual fill percentages, customize colors via CSS, and use API methods for real-time updates.
Does it support recurring tasks?
DHTMLX Gantt does not natively support recurring tasks Gantt functionality. You can implement custom recurring tasks using the Gantt API and JavaScript, such as generating repeated task instances dynamically based on rules for daily, weekly, monthly, or annual patterns.
Is DHTMLX Gantt accessible and keyboard-friendly?
Yes, DHTMLX Gantt provides accessibility features including WAI-ARIA attributes, keyboard navigation, and high-contrast themes. Users can navigate task rows and cells, edit tasks, and perform common actions using keyboard shortcuts.
Performance
Can DHTMLX Gantt handle large projects?
DHTMLX Gantt is designed to work efficiently with projects that contain up to 100,000 tasks and links. The library includes such performance optimization features as smart rendering, which allows a Gantt chart with a large dataset to be rendered and managed smoothly in the browser. These capabilities help maintain responsive scrolling, task updates, and timeline interactions even when working with complex project structures.
How many tasks can DHTMLX Gantt render?
DHTMLX Gantt has been tested with datasets of up to 100,000 tasks while maintaining smooth performance in modern browsers. The library includes optimization techniques designed for a high-performance Gantt chart, such as smart rendering and efficient data processing. The exact number may vary depending on the browser, hardware, and configuration of the application.
Does it support virtual scrolling?
A virtual scrolling Gantt mechanism is available in DHTMLX Gantt through its smart rendering. Instead of rendering thousands of rows at once, the library displays only the tasks currently visible in the viewport.
Can it handle real-time updates?
DHTMLX Gantt can handle dynamic data updates, which makes it suitable for real-time project tracking scenarios. The chart can be updated programmatically when task data changes, allowing the interface to reflect the latest project information without reloading the page. Developers can synchronize data with backend services or APIs to keep schedules and task progress up to date.
How to optimize Gantt performance?
To optimize Gantt chart performance, DHTMLX Gantt provides several built-in techniques recommended in the official documentation. These include enabling smart rendering to load only visible tasks, reducing the number of DOM elements, and limiting the amount of data displayed at once. Developers can also improve performance by disabling unnecessary features and using efficient data loading methods such as dynamic or server-side loading.
Integrations
Can I use DHTMLX Gantt for React?
You can use DHTMLX Gantt in React applications to create an interactive React Gantt chart. The official React wrapper integrates Gantt with React props and state, while tasks and links can be passed from React state or API responses. This makes it possible to integrate project scheduling into React-based interfaces.
Does it support Angular?
DHTMLX Gantt can be integrated into Angular applications to create a full-featured Angular Gantt chart. The library can be installed via npm and added to an Angular project using the official Angular wrapper. Task and link data can then be passed to the chart through Angular inputs, allowing Angular apps to display and manage project schedules.
Can I integrate DHTMLX Gantt with Vue.js?
DHTMLX Gantt can be integrated into Vue applications to build a Vue Gantt chart. It can be installed via npm and added to a Vue project using the official Vue wrapper. Task and link data can then be passed to the chart through Vue props.
Does it support Svelte?
Yes, you can use DHTMLX Gantt in Svelte projects to create an interactive Svelte Gantt chart. The official guide shows how to install the library, create a Gantt.svelte component, and initialize the chart with a container element. Project data can then be passed to the component and rendered.
Does DHTMLX Gantt support TypeScript?
Yes, DHTMLX Gantt provides full support for TypeScript Gantt chart development. The library includes TypeScript type definitions, allowing developers to benefit from type checking and better code completion in modern editors.
Can I integrate it with ERP or CRM systems?
DHTMLX Gantt can be integrated with enterprise software, including ERP or CRM systems, to create a Gantt chart enterprise integration solution. The component can connect to backend databases or APIs to load and update tasks, dependencies, and resources in real time. This allows organizations to visualize project schedules, track progress, and synchronize data across enterprise applications, making it suitable for large-scale project management workflows.
Can I integrate DHTMLX Gantt with Salesforce?
Yes, DHTMLX Gantt can be integrated with Salesforce to build a Salesforce Gantt chart inside the platform. The library is typically uploaded as a Static Resource and embedded in a Salesforce Lightning Web Component (LWC). Project data, including tasks and links, can be stored in custom Salesforce objects and accessed through Apex classes. This setup enables the Gantt chart to display and manage project schedules while keeping data synchronized with Salesforce records.
Can I connect it to the REST API?
DHTMLX Gantt can be integrated with a backend using a Gantt chart REST API. You can implement a RESTful API on the server and connect it using the built-in DataProcessor module. DataProcessor tracks changes in tasks or links and automatically sends AJAX requests to the API when data is added, updated, or deleted.
Does it support GraphQL?
DHTMLX Gantt can be used to build a GraphQL Gantt chart by connecting the component to a GraphQL backend through custom data requests. Developers can fetch tasks and links from a GraphQL API and then load the data into the chart using the Gantt API.
How do I use DHTMLX Gantt with an AI coding assistant or MCP server?
DHTMLX Gantt provides Agent Skills and an MCP server for AI-assisted development. Install the appropriate Gantt skill to help coding assistants follow DHTMLX integration patterns, and connect the DHTMLX MCP server to give them access to the latest documentation and API reference while generating or reviewing code.
Customization
Does DHTMLX Gantt support themes?
DHTMLX Gantt supports a variety of Gantt chart themes to change the appearance of the project timeline. You can apply predefined skins, including Terrace, Dark, Material, and Contrast, by including the corresponding CSS files. Themes can also be customized with CSS variables to match the design of your web application.
Can I change timeline scales?
DHTMLX Gantt allows you to customize the Gantt timeline scale in JavaScript to display time units that fit your project. You can configure multiple scales (e.g., hours, days, weeks, months) using the scale_unit, date_scale, and subscales properties.
Can I customize the task appearance?
DHTMLX Gantt provides multiple ways to customize the Gantt chart task appearance. Developers can change task colors, text styles, and progress bars using CSS, templates, or task properties. It's allowed to use templates, e.g., task_class, to dynamically apply custom styles based on task data.
Can I create custom task templates?
With DHTMLX Gantt, you can create Gantt chart templates to customize how tasks are rendered. You can use built-in template functions, e.g., task_text, task_class, and task_bar_height, to define custom task labels, CSS classes, sizes, and visual elements. These template functions allow you to tailor the appearance and content of taskbars based on your data or logic.
Can I customize tooltips?
The Gantt chart tooltip customization is available via its built-in tooltip API. You can enable default tooltips or define custom content by using gantt.templates.tooltip_text and event handlers to specify what is shown when users hover over tasks, links, or scales. This lets you include custom HTML, task details, or additional project information in the tooltip display.
Can I configure working time and calendars?
DHTMLX Gantt supports configuring Gantt working time calendar settings to define work hours, non‑working days, and custom work schedules. You can set global working hours, enable automatic exclusion of weekends, and define custom time scales using gantt.setWorkTime(), calendar assignments, and worktime helpers.
Does it support localization?
DHTMLX Gantt supports Gantt chart localization through built-in language files and configurable locale settings. This makes it easy to adapt date formats, texts, and UI elements to different languages and regions, creating a user-friendly project management interface for international teams.
Export and Import
Can I export large projects?
DHTMLX Gantt can export large Gantt project data efficiently using its export API. The library supports exporting to PDF, PNG, Excel, Primavera P6, and MS Project formats, even for charts with thousands of tasks and links.
Can I export a Gantt chart to PDF?
DHTMLX Gantt supports Gantt chart export PDF functionality through a built-in export API. You can enable the export_api plugin and call the gantt.exportToPDF() method to generate a PDF file of the chart. The export can use the DHTMLX online export service or a locally installed export module on your server. You can also customize the output by setting parameters such as file name, page format, orientation, header, footer, or exported date range.
Can I export to Excel?
Yes, DHTMLX Gantt supports Gantt chart export Excel functionality through its export API. You can enable the export_api plugin and call the gantt.exportToExcel() method to generate an .xlsx file from the chart data. The export can use the DHTMLX online export service or a locally installed export module.
Can I import tasks from Excel?
DHTMLX Gantt allows you to import Excel to Gantt chart using its Excel integration features. You can use the importExcel method to load task and link data from .xlsx files directly into the chart. This enables developers to convert spreadsheet-based project plans into interactive Gantt timelines, preserving task details, start/end dates, durations, and dependencies.
Does DHTMLX Gantt support PNG export?
DHTMLX Gantt supports Gantt chart export to PNG and allows saving the current Gantt timeline as an image that can be shared or embedded in reports. You can enable the export_api plugin and call the gantt.exportToPNG() method to generate a PNG image of the chart. The export can use the DHTMLX online export service or a locally deployed export module.
Does DHTMLX Gantt support server-side export?
DHTMLX Gantt supports server-side Gantt export using its export modules. You can deploy the export service on your own server instead of using the online export service, which allows exporting charts to PDF, PNG, Excel, iCal, and MS Project directly from the server. This setup is useful for handling large datasets, automating report generation, and integrating Gantt export into enterprise workflows.
Alternatives
How do I choose a JavaScript Gantt chart library for my project?
Start with your requirements for task scheduling, resource management, framework integration, customization, and licensing. Test shortlisted libraries with realistic task volumes and dependencies, and review their documentation and support options. Our guide to the Top 8 JavaScript Gantt Chart Libraries provides an overview to help you compare options and choose a suitable component.
Is DHTMLX Gantt a Bryntum Gantt alternative?
DHTMLX Gantt is an alternative to Bryntum Gantt for creating project planning applications. Both cover core enterprise requirements, including dependency-based scheduling, calendars, critical path calculations, and resource control. DHTMLX Gantt combines a lighter package with lower memory usage under large workloads, which can be particularly beneficial for data-intensive systems with large numbers of tasks and dependencies.
How does DHTMLX Gantt compare with Syncfusion Gantt?
Both DHTMLX Gantt and Syncfusion Gantt provide advanced scheduling, resource management, and customization capabilities. DHTMLX Gantt additionally supports server-side scheduling with Node.js and bidirectional data exchange with MS Project and Primavera P6, making it well suited for enterprise applications with complex backend and project data integration requirements.
Is DHTMLX Gantt suitable as an open-source Gantt alternative?
Yes, DHTMLX Gantt Community Edition is open source and distributed under the MIT license. It can be installed from npm or downloaded from GitHub and used in both commercial and open-source projects. For applications that require advanced features such as auto-scheduling, or resource management, you can upgrade to a commercial PRO edition.
Special offer for you
Get 5% off DHTMLX Gantt
Use this code at checkout to save on your
license purchase. Valid for 3 months.
license purchase. Valid for 3 months.
Promo code
Gantt5I
Click to copy