This sample allows you to customize the Gantt Chart timeline by adjusting the timeline unit size, header text format, and count for both the top and bottom tiers, and provides an option to enable the multitaskbar feature.
ID | Name | Start Date | End Date | Duration | Dependency | Progress |
|---|---|---|---|---|---|---|
| 1 | Project schedule | Mon Feb 10 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/14/2025 | 25 days | 48 | |
| 2 | Planning | Mon Feb 10 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/14/2025 | 5 days | 100 | |
| 3 | Plan timeline | Mon Feb 10 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/14/2025 | 5 days | 100 | |
| 4 | Plan budget | Mon Feb 10 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/14/2025 | 5 days | 100 | |
| 5 | Allocate resources | Mon Feb 10 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/14/2025 | 5 days | 100 | |
| 6 | Planning complete | Fri Feb 14 2025 17:00:00 GMT+0000 (Coordinated Universal Time) | 2/14/2025 | 0 days | 3FS,4FS,5FS | 0 |
| 7 | Design | Mon Feb 17 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/21/2025 | 5 days | 85 | |
| 8 | Software specification | Mon Feb 17 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/19/2025 | 3 days | 6FS | 60 |
| 9 | Develop prototype | Mon Feb 17 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/19/2025 | 3 days | 6FS | 100 |
| 10 | Get approval from customer | Thu Feb 20 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/21/2025 | 2 days | 9FS | 100 |
| 11 | Design complete | Fri Feb 21 2025 17:00:00 GMT+0000 (Coordinated Universal Time) | 2/21/2025 | 0 days | 10FS | 0 |
| 12 | Implementation phase | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/7/2025 | 10 days | 26 | |
| 13 | Phase 1 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/6/2025 | 9 days | 25 | |
| 14 | Implementation module 1 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/6/2025 | 9 days | 25 | |
| 15 | Development task 1 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/26/2025 | 3 days | 11FS | 50 |
| 16 | Development task 2 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/26/2025 | 3 days | 11FS | 50 |
| 17 | Testing | Thu Feb 27 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/28/2025 | 2 days | 15FS,16FS | 0 |
| 18 | Bug fix | Mon Mar 03 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/4/2025 | 2 days | 17FS | 0 |
| 19 | Customer review meeting | Wed Mar 05 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/6/2025 | 2 days | 18FS | 0 |
| 20 | Phase 1 complete | Thu Mar 06 2025 17:00:00 GMT+0000 (Coordinated Universal Time) | 3/6/2025 | 0 days | 19FS | 0 |
| 21 | Phase 2 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/7/2025 | 10 days | 28 | |
| 22 | Implementation module 2 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/7/2025 | 10 days | 28 | |
| 23 | Development task 1 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/27/2025 | 4 days | 50 | |
| 24 | Development task 2 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/27/2025 | 4 days | 50 | |
| 25 | Testing | Fri Feb 28 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/3/2025 | 2 days | 23FS,24FS | 0 |
| 26 | Bug fix | Tue Mar 04 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/5/2025 | 2 days | 25FS | 0 |
| 27 | Customer review meeting | Thu Mar 06 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/7/2025 | 2 days | 26FS | 0 |
| 28 | Phase 2 complete | Fri Mar 07 2025 17:00:00 GMT+0000 (Coordinated Universal Time) | 3/7/2025 | 0 days | 27FS | 0 |
| 29 | Phase 3 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/6/2025 | 9 days | 25 | |
| 30 | Implementation module 3 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/6/2025 | 9 days | 25 | |
| 31 | Development task 1 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/26/2025 | 3 days | 50 | |
| 32 | Development task 2 | Mon Feb 24 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/26/2025 | 3 days | 50 | |
| 33 | Testing | Thu Feb 27 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 2/28/2025 | 2 days | 31FS,32FS | 0 |
| 34 | Bug fix | Mon Mar 03 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/4/2025 | 2 days | 33FS | 0 |
| 35 | Customer review meeting | Wed Mar 05 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/6/2025 | 2 days | 34FS | 0 |
| 36 | Phase 3 complete | Thu Mar 06 2025 17:00:00 GMT+0000 (Coordinated Universal Time) | 3/6/2025 | 0 days | 35FS | 0 |
| 37 | Integration | Mon Mar 10 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/12/2025 | 3 days | 20FS,28FS,36FS | 0 |
| 38 | Final testing | Thu Mar 13 2025 08:00:00 GMT+0000 (Coordinated Universal Time) | 3/14/2025 | 2 days | 37FS | 0 |
| 39 | Final delivery | Fri Mar 14 2025 17:00:00 GMT+0000 (Coordinated Universal Time) | 3/14/2025 | 0 days | 38FS | 0 |
Feb 05, 2025 | Feb 09, 2025 | Feb 16, 2025 | Feb 23, 2025 | Mar 02, 2025 | Mar 09, 2025 | Mar 16, 2025 |
|---|
W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S |
|---|
Timeline Unit Size | |
Top tier | |
Count | |
Unit | |
Format | |
Bottom tier | |
Count | |
Unit | |
Format | |
Enable multitaskbar |
This example demonstrates how to effectively customize the timeline settings of a Gantt Chart.
You can customize the timeline width by adjusting the timelineunitsize property
in timelineSettings.
The Gantt Chart supports various timeline units such as minutes, hours, days, weeks, months, and years.
You can easily customize these units by changing the unit for both top tier and bottom tier in timelineSettings.
The format of the timeline can be customized by modifying the format value for both the top and bottom tiers.
You can combine timeline cells in the top and bottom tiers using the count property in timelineSettings.
Tooltips are visible by default in the Gantt Chart timeline, You can customize the tooltip visiblity by using the showtooltip property in the timeline settings.
enablemultitaskbar allows you to display multiple taskbars within a parent row, ensuring a clear overview even in collapsed states.
Gantt component features are segregated into individual feature-wise modules. To use a selection support, inject the
Selection module. To use markers in Gantt, inject the DayMarkers module.
More information on the Essential® React Gantt Chart can be found in this documentation section.