}

Example of Timeline API in ASP.NET Core Gantt Chart Control

Gantt Chart
Timeline
Timeline API

This sample illustrates the different phases from planning to delivery, involved in a software development lifecycle. This sample demonstrates the different timeline modes available in Gantt chart. Options are available to change the unit, format, and count of the header texts for both top and bottom timeline headers.

1
Project schedule
2/8/20243/7/202421 days49
2
Planning
2/8/20242/14/20245 days100
3
Plan timeline
2/8/20242/14/20245 days100
4
Plan budget
2/8/20242/14/20245 days100
5
Allocate resources
2/8/20242/14/20245 days100
6
Planning complete
2/14/20242/14/20240 days3FS100
7
Design
2/15/20242/21/20245 days85
8
Software specification
2/15/20242/19/20243 days6FS60
9
Develop prototype
2/15/20242/19/20243 days6FS100
10
Get approval from customer
2/20/20242/21/20242 days9FS100
11
Design complete
2/21/20242/21/20240 days10FS0
12
Implementation phase
2/22/20243/7/202411 days12
13
Phase 1
2/22/20243/5/20249 days16
14
Implementation module 1
2/22/20243/5/20249 days16
15
Development task 1
2/22/20242/26/20243 days11FS50
17
Testing
2/26/20242/27/20242 days15FS0
18
Bug fix
3/1/20243/4/20242 days17FS0
19
Customer review meeting
3/4/20243/5/20242 days18FS0
20
Phase 1 complete
3/5/20243/5/20240 days19FS0
21
Phase 2
2/22/20243/4/20248 days20
22
Implementation module 2
2/22/20243/4/20248 days20
24
Development task 2
2/22/20242/27/20244 days50
25
Testing
2/26/20242/27/20242 days0
26
Bug fix
2/28/20242/29/20242 days25FS0
27
Customer review meeting
3/1/20243/4/20242 days26FS0
28
Phase 2 complete
3/4/20243/4/20240 days27FS0
29
Phase 3
2/26/20243/7/20249 days0
14
Implementation module 1
2/22/20243/5/20249 days16
15
Development task 1
2/22/20242/26/20243 days11FS50
17
Testing
2/27/20242/28/20242 days15FS0
18
Bug fix
2/29/20243/1/20242 days17FS0
19
Customer review meeting
3/4/20243/5/20242 days18FS0
20
Phase 1 complete
3/5/20243/5/20240 days19FS0
37
Integration
3/6/20243/8/20243 days20FS0
38
Final testing
3/11/20243/12/20242 days37FS0
39
Final delivery
3/12/20243/12/20240 days38FS0
Project schedule
Planning
Plan timeline
Plan budget
Allocate resources
Planning complete
Design
Software specification
Develop prototype
Get approval from customer
Design complete
Implementation phase
Phase 1
Implementation module 1
Development task 1
Testing
Bug fix
Customer review meeting
Phase 1 complete
Phase 2
Implementation module 2
Development task 2
Testing
Bug fix
Customer review meeting
Phase 2 complete
Phase 3
Implementation module 1
Development task 1
Testing
Bug fix
Customer review meeting
Phase 1 complete
Integration
Final testing
Final delivery
Properties
Unit width
Top tier
Count
Unit
Format
Bottom tier
Count
Unit
Format
Enable multitaskbar

In this example, you can see how to change the timeline settings in Gantt chart. The top and bottom timeline header texts can be customized by using the timelineSettings.topTier and timelineSettings.bottomTier properties. Using these properties, you can change the format, count, and units of the timeline header texts.

Gantt chart has built-in support for many timeline modes such as minutes, hour, day, week, month, and year.

The default timeline headers can also be replaced with custom header texts by using the formatter method.

Tooltip is enabled by default for the timeline headers. To see the tooltip in action, hover a point or tap on a point in touch enabled devices.

If the enableMultiTaskbar property is enabled, it displays child taskbars in the parent row when in collapsed state.

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab
Documentation
opens in a new tab
Forum
opens in a new tab
Blog
opens in a new tab
Copyright © 2001 - 2025 Syncfusion® Inc.