Blazor Gantt Chart Example - Timeline API Customization
ID | Name | Start Date | End Date | Duration | Progress | Dependency | Notes |
|---|
| 1 | Project initiation | 4/5/2021 | 4/16/2021 | 10 days | 56 | ||
| 2 | Identify site location | 4/5/2021 | 4/9/2021 | 5 days | 70 | ||
| 3 | Perform soil test | 4/5/2021 | 4/9/2021 | 5 days | 50 | ||
| 4 | Soil test approval | 4/12/2021 | 4/16/2021 | 5 days | 50 | 2FS | |
| 5 | Project estimation | 4/12/2021 | 4/16/2021 | 5 days | 25 | ||
| 6 | Develop floor plan for estimation | 4/12/2021 | 4/16/2021 | 5 days | 0 | ||
| 7 | List materials | 4/12/2021 | 4/16/2021 | 5 days | 50 | ||
| 8 | Development of final design | 4/5/2021 | 4/7/2021 | 3 days | 23 | ||
| 9 | Develop dimensions and design | 4/5/2021 | 4/6/2021 | 2 days | 30 | ||
| 10 | Develop designs to meet industry | 4/5/2021 | 4/6/2021 | 2 days | 40 | ||
| 11 | Include all the details | 4/5/2021 | 4/7/2021 | 3 days | 30 | ||
| 12 | CAD - Computer Aided Design | 4/5/2021 | 4/7/2021 | 3 days | 0 |
Apr 02, 2021 | Apr 04, 2021 | Apr 11, 2021 | Apr 18, 2021 | Apr 25, 2021 | May 02, 2021 | May 09, 2021 | May 16, 2021 | May 23, 2021 | May 30, 2021 | Jun 06, 2021 | Jun 13, 2021 | Jun 20, 2021 | Jun 27, 2021 | Jul 04, 2021 | Jul 11, 2021 | Jul 18, 2021 | Jul 25, 2021 | Aug 01, 2021 | Aug 08, 2021 | Aug 15, 2021 |
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 | 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 | 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 | S | M | T | W | T | F | S | S | M | T | W | T | F |
Properties
This sample demonstrates the various phases of a software development lifecycle from planning to delivery while demonstrating the flexible timeline customization options available in the Blazor Gantt Chart.
The Gantt Chart supports multiple timeline modes, allowing you to adjust the unit, format, and count of both the top and bottom timeline headers. These settings can be configured using the TimelineSettings.TopTier and TimelineSettings.BottomTier properties, enabling precise control over how time intervals are displayed.
Additionally, the GanttTimelineSettings.TimelineViewMode property allows the chart to visualize different time scales, including minutes, hours, days, weeks, months, and years. This flexibility ensures the chart can adapt to various project scopes and planning needs.
Tooltip is enabled by default for timeline headers, providing quick insights when hovering over or tapping on a timeline point especially useful on touch-enabled devices.
For further details, refer to the documentation.