HOME

Grids
- Data GridUpdated
- Pivot TableUpdated
- Tree Grid
- Spreadsheet
Interactive Chat
- AI AssistView
- Chat UIpreview
Data Visualization
- ChartsUpdated
- 3D Chart
- 3D Circular Chart
- Stock ChartUpdated
- Arc Gauge
- Circular Gauge
- Diagram
- HeatMap Chart
- Linear Gauge
- MapsUpdated
- Range Selector
- Smith Chart
- Sparkline Charts
- TreeMap
- Bullet Chart
- Kanban
Forms
- Query Builder
File Viewers & Editors
- PDF Viewer
- Rich Text Editor
- Markdown Editor
- Document Editor
- Image EditorUpdated
Calendars
- SchedulerUpdated
- Calendar
- DatePicker
- DateRangePicker
- DateTimePicker
- TimePicker
- Gantt Chart
Buttons
- Button
- Chips
- Floating Action Button
- SpeedDial
Dropdowns
- AutoCompleteUpdated
- ComboBoxUpdated
- Dropdown ListUpdated
- Dropdown Tree
- MultiSelect DropdownUpdated
- List Box
- MultiColumn ComboBox
- Mention
Navigation
- Accordion
- AppBar
- Breadcrumb
- Carousel
- Context MenuUpdated
- Menu Bar
- Sidebar
- Tabs
- Toolbar
- TreeView
- File Manager
- Ribbon
- Stepper
Notifications
- Badge
- Message
- Toast
- Progress Bar
- Skeleton
Inputs
- TextBox
- TextArea
- Input Mask
- Numeric Textbox
- Color Picker
- File Upload
- Range Slider
- Signature
- In-place Editor
- Rating
- OTP Input
Layout
- Avatar
- Card
- Dialog
- Predefined Dialogs
- ListView
- Tooltip
- Splitter
- Dashboard Layout
- Timeline

All Controls

Gantt Chart
Overview
Default Functionalities
Editing
Virtual Scroll
Undo Redo
Loading Animation
Data Binding
Local Data
Big Data Set
Remote Data
Self Reference Data
Scheduling Concepts
Task Scheduling Mode
Workweek
Working Time Range
Holidays
Unscheduled Tasks
Timezone
Critical Path
Baseline
Event Markers
Indicators
Timeline
Timeline API
Zooming
Columns
Column Template
Header Template
Reorder
Resizing
Column Menu
Show or Hide Column
Resource
Resource Allocation
Resource View
Resource Multi Taskbar
Sorting
Default Sorting
Sorting API
Templates
Taskbar Template
Timeline Template
Task Label Template
Tooltip Template
Toolbar Template
Filtering
Default Filtering
Advanced Filtering
Miscellaneous
Selection
Context Menu
Exporting
Row Drag and Drop
Split Tasks
Gridlines
Events
Keyboard Navigation

Gantt Chart

Overview

This sample shows an overview of the EJ2 Gantt Chart features that visualize the progress of each feature of the product towards its release and make it easier to monitor the scheduling of the dependent items.

Task Id

Product Release

Assignee

Status

Priority

Planned Hours

Work Log

treeGridOverview_gridcontrol_header_table

No records to display

Source:https://en.wikipedia.org/

name

Type

Description

api-grid_header_table

dataSource

Object[]|DataManager|Object

Defines the data source for the Gantt chart, which is used to render rows and tasks. The dataSource can be an array of JavaScript objects, an instance of DataManager, or a single object. The array of objects should contain the task data with properties such as TaskID, TaskName, StartDate, EndDate, etc. This allows dynamic binding of tasks and their relationships (e.g., dependencies, subtasks, progress) to the Gantt chart.

taskFields

TaskFieldsModel

Defines the mapping properties to extract task-related values, such as ID, start date, end date, duration, and progress, from the data source. This allows the Gantt chart to properly map the provided data to the corresponding task fields and render them accordingly.

height

number|string

Defines the height of the Gantt component container. The height property can be set to a specific value (in pixels or percentage) or set to 'auto' for automatic height adjustment based on content.

highlightWeekends

boolean

If highlightWeekends is set to true, it highlights all weekend days in the week-day timeline mode. This makes weekends visually distinct in the timeline view.

eventMarkers

EventMarkerModel[]

Defines the events and milestones along the project timeline. These event markers indicate significant events or milestones throughout the project's duration.

labelSettings

LabelSettingsModel

Configures the labels displayed on the right, left, and inside the taskbars in the Gantt chart.

projectStartDate

Date|string

Defines the start date of the project. If the projectStartDate is not set, it will be automatically calculated based on the data source. The date can be provided as a Date object or a string in a valid date format.

projectEndDate

Date|string

Defines the end date of the project. If the projectEndDate is not set, it will be automatically calculated based on the data source. The date can be provided as a Date object or a string in a valid date format.

This example shows the three-quarter release planning of product features rendered in the EJ2 Gantt chart. It tracks the quarterly release planning of product status, resources, and task scheduling.

EJ2 Gantt Chart features such as Sorting, Filtering, Column resizing, Column menu, column template and so on are used in this demo.

Transform your Next.js web apps today with Syncfusion^® React components

80+ high-performance and responsive UI components

Dedicated support

Hassle-free licensing

TRY IT FOR FREE