}
  • Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

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

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.

DEMO
SOURCE
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
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab