Best React Gantt chart components for project management

May 18, 2026 · 14 min read

Computer Science graduate and Developer Advocate at Bryntum, previously at Vercel. Writes about JavaScript UI components and developer tooling.

Building a project management UI requires more than rendering a timeline. Teams need work breakdown structure (WBS), baselines, critical path analysis, resource management, and dependency types beyond simple finish-to-start links. This comparison covers five React Gantt options against those criteria: Bryntum Gantt, DHTMLX Gantt, Syncfusion Gantt, DayPilot Gantt, and gantt-task-react.

The project management scope in this article means an auto-scheduling engine, all four dependency types, milestones, baselines, critical path highlighting, and resource management. Some libraries ship the full scheduling engine in the base product, others gate advanced features behind a higher license tier, and one is MIT-licensed but covers only basic visualization. For a wider comparison that covers libraries without those constraints, see our guide to the best React Gantt chart libraries.

Bryntum Gantt

Bryntum Gantt is a commercial Gantt chart built on vanilla JavaScript with a dedicated React wrapper package. It is backed by the ChronoGraph reactive scheduling engine, which propagates date changes through dependency chains automatically. You can explore the full range of capabilities in the Bryntum Gantt demos.

Getting started with Bryntum Gantt

Install the trial package from the public npm registry along with the React wrapper:

npm install @bryntum/gantt@npm:@bryntum/gantt-trial@7.3.0
npm install @bryntum/gantt-react@7.3.0

CSS imports must appear in this specific order. The FontAwesome stylesheets must come first because the Gantt's toolbar icons depend on them. The core gantt.css file follows, and the theme file comes last so its variables override the defaults correctly:

import '@bryntum/gantt/fontawesome/css/fontawesome.css';
import '@bryntum/gantt/fontawesome/css/solid.css';
import '@bryntum/gantt/gantt.css';
import '@bryntum/gantt/svalbard-light.css';

The BryntumGantt component spreads a config object as props. Pass all data through the project prop. Never mix the project prop with inline data props (tasks, dependencies, resources) directly on BryntumGantt, as using both simultaneously throws a runtime error:

import { BryntumGantt } from '@bryntum/gantt-react';
import { useState } from 'react';

// IMPORTANT: never mix project prop with inline data props (tasks, dependencies, resources). It throws at runtime.
const App = () => {
    const [ganttConfig] = useState({
        columns : [
            { type : 'name', width : 250 },
            { type : 'duration', width : 80 },
            { type : 'percentdone', width : 60 }
        ],
        project : {
          startDate : '2025-01-14',
          tasks : [
              {
                  id : 1000, name : 'Launch SaaS Product', expanded : true, percentDone : 35.7,
                  children : [
                      { id : 11, name : 'Install Apache',      startDate : '2025-01-14', duration : 3, percentDone : 50 },
                      { id : 12, name : 'Configure firewall', startDate : '2025-01-14', duration : 3, percentDone : 50 },
                      { id : 15, name : 'Run tests',          startDate : '2025-01-21', duration : 2, percentDone : 0 }
                  ]
              }
          ],
          dependencies : [
              { fromTask : 11, toTask : 15, lag : 2 },
              { fromTask : 12, toTask : 15 }
          ]
        }
    });
    return <BryntumGantt {...ganttConfig} />;
};

Bryntum ships 10 themes across five light/dark pairs: svalbard-light, svalbard-dark, stockholm-light, stockholm-dark, visby-light, visby-dark, material3-light, material3-dark, fluent2-light, and fluent2-dark. To switch themes, replace the theme CSS import.

Bryntum Gantt

Bryntum Gantt features

Auto-scheduling with the ChronoGraph reactive engine: task dates recalculate when predecessors or constraints change
Critical path method (CPM) visualization
Baselines for comparing planned versus actual progress
All four dependency types: finish-to-start, start-to-start, finish-to-finish, and start-to-finish
Milestones with configurable rendering
Resource management and resource leveling
WBS with indent/outdent support
Client-side export to PDF, PNG, Excel, ICS, and MS Project XML with no server required
MS Project and Primavera P6 import via MPXJ
10 themes across five light/dark pairs
45 built-in locales
React, Angular, Vue, and plain JavaScript wrappers
HTTP MCP server at mcp.bryntum.com for AI-assisted development

Bryntum Gantt pricing

Bryntum Gantt is sold on a per-developer basis, starting at $940 per developer. The license is perpetual and includes 12 months of updates. OEM and SaaS usage requires a separate quote. A free 45-day trial is available at bryntum.com/download/?product=gantt.

Pros of Bryntum Gantt

Comprehensive scheduling engine (ChronoGraph) with automatic dependency propagation
All four dependency types and resource leveling included in the base license
Client-side export to PDF, Excel, and MS Project XML without a server-side component
All features included in the base license with no feature-gated tiers
10 themes covering both light and dark variants
HTTP MCP server for AI-assisted development

Cons of Bryntum Gantt

There is no free tier beyond the 45-day trial. The per-developer entry cost is higher than some alternatives, which may be a consideration for small teams or individual developers evaluating options.

DHTMLX Gantt

DHTMLX Gantt is a JavaScript Gantt library with no official React wrapper. In a React project, you initialize it imperatively inside a useEffect hook using a container ref. Advanced project management features, including critical path, baselines, and resource management, require the Pro license.

Getting started with DHTMLX Gantt

Install the package from the public npm registry:

npm install dhtmlx-gantt

DHTMLX Gantt is a global singleton. Initialization requires a specific sequence: gantt.init() must be called before gantt.parse(). Reversing this order leaves the chart without a DOM target and produces a silent failure. The clearAll() call in the cleanup function prevents data from persisting across React strict-mode remounts:

import { useEffect, useRef } from 'react';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import gantt from 'dhtmlx-gantt';

const DHtmlxGanttComponent = () => {
    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        gantt.config.date_format = '%Y-%m-%d';
        gantt.config.work_time = true;
        gantt.init(containerRef.current!);
        gantt.parse({
            data  : [
                { id : 1, text : 'Phase 1', start_date : '2026-01-01', duration : 10, open : true },
                { id : 2, text : 'Requirements', start_date : '2026-01-01', duration : 5, parent : 1 },
                { id : 3, text : 'Design', start_date : '2026-01-08', duration : 8, parent : 1 }
            ],
            links : [{ id : 1, source : 2, target : 3, type : '0' }]
        });
        return () => gantt.clearAll();
    }, []);

    return (
        <div
            ref={containerRef}
            style={{ width : '100%', height : '100vh' }}
        />
    );
};

The global singleton pattern also means that rendering multiple DHTMLX Gantt instances on the same page requires the Commercial license or higher.

DHTMLX Gantt

DHTMLX Gantt features

Drag-and-drop task editing
Dependency links
Zoom levels
Task trees and subtasks
Auto-scheduling, critical path, baselines, resource management, and all four dependency types (Pro license required)
Client-side export available as a separate add-on ($350)

DHTMLX Gantt pricing

DHTMLX Gantt Standard is available under the GPL license at no cost for open-source projects. Commercial licenses are perpetual: Individual at $699, Commercial at $1,399, Enterprise at $2,999, and Ultimate at $5,999.

Pros of DHTMLX Gantt

GPL Standard edition is free for open-source projects
Published, tiered pricing makes upgrade costs predictable
Available on the public npm registry
HTTP MCP server available for AI-assisted development

Cons of DHTMLX Gantt

There is no official React wrapper, so you must manage the global singleton lifecycle manually inside useEffect, including cleanup to avoid issues with React strict mode. Critical path, baselines, resource management, and all four dependency types are locked behind the Pro upgrade and are not available in the Standard edition. Client-side export requires purchasing a separate add-on.

Syncfusion Gantt

Syncfusion Gantt is a full-featured Gantt component with a native React package, @syncfusion/ej2-react-gantt. It includes critical path, baselines, resource management, and all four dependency types in a single package.

Getting started with Syncfusion Gantt

Install the React package:

npm install @syncfusion/ej2-react-gantt

The Syncfusion component system is modular, so the Gantt's CSS depends on several sibling packages. All nine of the following imports are required. Omitting any one of them results in missing styles for buttons, dropdowns, popups, or the grid panel:

import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-buttons/styles/material.css';
import '@syncfusion/ej2-calendars/styles/material.css';
import '@syncfusion/ej2-dropdowns/styles/material.css';
import '@syncfusion/ej2-grids/styles/material.css';
import '@syncfusion/ej2-inputs/styles/material.css';
import '@syncfusion/ej2-layouts/styles/material.css';
import '@syncfusion/ej2-navigations/styles/material.css';
import '@syncfusion/ej2-react-gantt/styles/material.css';

registerLicense() must be called before any Syncfusion component mounts. Placing it at the top of your entry file is the safest approach. The taskFields mapping connects your data model to the Gantt's internal field names:

import { registerLicense } from '@syncfusion/ej2-base';
import { GanttComponent, Inject, Edit, Toolbar, CriticalPath, UndoRedo, ExcelExport, PdfExport } from '@syncfusion/ej2-react-gantt';

registerLicense('YOUR_LICENSE_KEY');

const tasks = [
    {
        TaskID       : 1,
        TaskName     : 'Phase 1',
        StartDate    : new Date('2026-01-01'),
        Duration     : 10,
        subtasks     : [
            { TaskID : 2, TaskName : 'Requirements', StartDate : new Date('2026-01-01'), Duration : 5, Progress : 100 },
            { TaskID : 3, TaskName : 'Design', StartDate : new Date('2026-01-08'), Duration : 8, Progress : 20 }
        ]
    }
];

const App = () => (
    <GanttComponent
        dataSource={tasks}
        taskFields={{ id : 'TaskID', name : 'TaskName', startDate : 'StartDate', duration : 'Duration', progress : 'Progress', child : 'subtasks' }}
        enableCriticalPath
    >
        <Inject services={[Edit, Toolbar, CriticalPath, UndoRedo, ExcelExport, PdfExport]} />
    </GanttComponent>
);

Syncfusion Gantt

Syncfusion Gantt features

Auto-scheduling engine
Critical path visualization
Baselines for planned versus actual comparison
All four dependency types: finish-to-start, start-to-start, finish-to-finish, and start-to-finish
Resource management
Virtual rendering for large datasets
Client-side export to PDF and Excel
Undo/redo
React, Angular, Vue, and Blazor wrappers
TypeScript support

Syncfusion Gantt pricing

Syncfusion offers a Community License at no cost for teams with under $1M in annual revenue and five or fewer developers. Commercial pricing is not published and requires a quote from Syncfusion sales.

Pros of Syncfusion Gantt

Community License covers all features at no cost for qualifying teams
Native React component via @syncfusion/ej2-react-gantt
Comprehensive project management feature set including auto-scheduling, critical path, baselines, and all four dependency types
Virtual rendering supports large datasets without a performance penalty

Cons of Syncfusion Gantt

CSS setup requires importing stylesheets for all dependency packages, which adds boilerplate compared to single-file approaches. Commercial pricing is not published, so teams that exceed the Community License thresholds cannot evaluate cost without contacting sales.

DayPilot Gantt

DayPilot Pro for JavaScript includes a Gantt chart component with a React package. The library is primarily aimed at calendar and scheduling use cases, and the Gantt is one component within a broader scheduling suite.

Getting started with DayPilot Gantt

The daypilot-pro-react package requires a DayPilot Pro license. Use @daypilot/daypilot-lite-react for evaluation:

npm install daypilot-pro-react

Configuration is passed as props, and task data is provided inline in the config object:

import { DayPilotGantt } from 'daypilot-pro-react';
import { useState } from 'react';

const App = () => {
    const [config] = useState({
        startDate  : '2026-01-01',
        days       : 30,
        tasks      : [
            {
                id        : 1,
                text      : 'Requirements',
                start     : '2026-01-01',
                end       : '2026-01-06',
                completed : 100
            },
            {
                id        : 2,
                text      : 'Design',
                start     : '2026-01-07',
                end       : '2026-01-15',
                completed : 20
            }
        ]
    });
    return <DayPilotGantt {...config} />;
};

DayPilot Gantt features

Task editing and drag-and-drop
Milestone markers
Basic dependency links
Task completion bars
UI Builder configurator for visual configuration
60-day free trial

DayPilot Gantt does not include a built-in scheduling engine, so task dates are not computed automatically based on dependencies or constraints.

DayPilot Gantt pricing

DayPilot Pro starts at $899 per developer for a perpetual license. A free tier (DayPilot Lite) is available with limited features.

Pros of DayPilot Gantt

UI Builder configurator lets you visually configure the component and copy the generated code
Native React component
Free tier and 60-day trial available

Cons of DayPilot Gantt

DayPilot Gantt lacks a scheduling engine, critical path analysis, baselines, and resource management. It supports only basic finish-to-start dependencies and does not compute task dates automatically. Teams building a full project management tool will find its feature set insufficient for scheduling-heavy workloads.

gantt-task-react

gantt-task-react is a free, MIT-licensed React Gantt library for rendering project timelines. It covers common visualization needs without requiring a license or any authentication.

Getting started with gantt-task-react

Install from the public npm registry:

npm install gantt-task-react

Data is passed as a typed Task array, and the viewMode prop controls the time scale:

import { Gantt, Task, ViewMode } from 'gantt-task-react';
import 'gantt-task-react/dist/index.css';

const tasks: Task[] = [
    {
        start        : new Date(2026, 0, 1),
        end          : new Date(2026, 0, 6),
        name         : 'Requirements',
        id           : 'task-1',
        type         : 'task',
        progress     : 100,
        isDisabled   : false,
        styles       : { progressColor : '#ffbb54' }
    },
    {
        start      : new Date(2026, 0, 7),
        end        : new Date(2026, 0, 15),
        name       : 'Design',
        id         : 'task-2',
        type       : 'task',
        progress   : 20,
        dependencies : ['task-1']
    }
];

const App = () => (
    <Gantt tasks={tasks} viewMode={ViewMode.Week} />
);

gantt-task-react features

Task grouping and progress bars
Drag to resize and drag to move
Finish-to-start dependency arrows
Multiple view modes: hour, quarter day, half day, day, week, and month
Click and double-click callbacks
TypeScript types included
MIT license

gantt-task-react pricing

Free under the MIT license. No trial period or registration required.

Pros of gantt-task-react

Free and open source with no license required
Zero setup friction: install and render
TypeScript types bundled in the package
Good fit for lightweight task visualization and read-mostly dashboards

Cons of gantt-task-react

There is no scheduling engine, no critical path analysis, no baselines, no resource management, and no client-side export. Only finish-to-start dependencies are supported. This library is not suitable for project management tools that require scheduling logic, multi-resource coordination, or WBS editing.

Feature comparison

The table below summarizes the project management features in each React Gantt component.

Feature	Bryntum Gantt	DHTMLX Gantt	Syncfusion Gantt	DayPilot Gantt	gantt-task-react
Auto-scheduling engine	Yes	Pro only	Yes	No	No
Critical path	Yes	Pro only	Yes	No	No
Baselines	Yes	Pro only	Yes	No	No
4 dependency types (FS/SS/FF/SF)	Yes	Pro only	Yes	No	No (FS only)
Milestones	Yes	Yes	Yes	Yes	Yes
Resource management	Yes	Pro only	Yes	No	No
WBS / indent-outdent	Yes	Yes	Yes	No	No
Client-side export	Yes	Add-on ($350)	Yes	No	No
Free tier	No	GPL Standard	Community License	Lite (limited)	MIT
React wrapper	Yes	No (manual)	Yes	Yes	Yes (native)

Use-case recommendations

The table below maps common project management requirements to the best-fit React Gantt component.

Requirement	Best choice
Full project management with scheduling engine and all PM features	Bryntum Gantt
Full PM features with a free tier for qualifying small teams	Syncfusion Gantt
Open-source project needing a Gantt chart	DHTMLX Gantt Standard
Lightweight task visualization with no license overhead	gantt-task-react

For teams building enterprise project management applications, Bryntum Gantt is the best fit in this list. The ChronoGraph scheduling engine, all four dependency types, resource leveling, baselines, critical path, client-side export, and the HTTP MCP server for AI-assisted development are all included in a single base license with no feature gating. The per-developer cost is higher than some alternatives, but the breadth of what ships in the standard package supports the premium for production applications.

Teams that qualify for Syncfusion's Community License (under $1M revenue, five or fewer developers) get access to the full Syncfusion feature set at no cost. This makes Syncfusion a compelling option for small teams with comprehensive project management requirements who fall within the eligibility criteria.

For the simplest case, a read-only project timeline in a React app that does not require a scheduling engine or resource management, gantt-task-react removes all licensing friction and gets a chart on screen with minimal configuration. Neither DayPilot Gantt nor gantt-task-react is suitable for project management tools that require auto-scheduling, and DHTMLX Gantt restricts all scheduling features to its paid Pro tier.

Bryntum Gantt​

Getting started with Bryntum Gantt​

Bryntum Gantt features​

Bryntum Gantt pricing​

Pros of Bryntum Gantt​

Cons of Bryntum Gantt​

DHTMLX Gantt​

Getting started with DHTMLX Gantt​

DHTMLX Gantt features​

DHTMLX Gantt pricing​

Pros of DHTMLX Gantt​

Cons of DHTMLX Gantt​

Syncfusion Gantt​

Getting started with Syncfusion Gantt​

Syncfusion Gantt features​

Syncfusion Gantt pricing​

Pros of Syncfusion Gantt​

Cons of Syncfusion Gantt​

DayPilot Gantt​

Getting started with DayPilot Gantt​

DayPilot Gantt features​

DayPilot Gantt pricing​

Pros of DayPilot Gantt​

Cons of DayPilot Gantt​

gantt-task-react​

Getting started with gantt-task-react​

gantt-task-react features​

gantt-task-react pricing​

Pros of gantt-task-react​

Cons of gantt-task-react​

Feature comparison​

Use-case recommendations​

Bryntum Gantt

Getting started with Bryntum Gantt

Bryntum Gantt features

Bryntum Gantt pricing

Pros of Bryntum Gantt

Cons of Bryntum Gantt

DHTMLX Gantt

Getting started with DHTMLX Gantt

DHTMLX Gantt features

DHTMLX Gantt pricing

Pros of DHTMLX Gantt

Cons of DHTMLX Gantt

Syncfusion Gantt

Getting started with Syncfusion Gantt

Syncfusion Gantt features

Syncfusion Gantt pricing

Pros of Syncfusion Gantt

Cons of Syncfusion Gantt

DayPilot Gantt

Getting started with DayPilot Gantt

DayPilot Gantt features

DayPilot Gantt pricing

Pros of DayPilot Gantt

Cons of DayPilot Gantt

gantt-task-react

Getting started with gantt-task-react

gantt-task-react features

gantt-task-react pricing

Pros of gantt-task-react

Cons of gantt-task-react

Feature comparison

Use-case recommendations