Top Tier and Bottom Tier in TypeScript Gantt Chart Control
18 Nov 20182 minutes to read
The TypeScript Gantt Chart control supports a two-tier timeline layout, enabling customization of both the top and bottom tiers through specific configuration options.
- topTier and bottomTier: Define the structure and visibility of each timeline tier.
- unit: Specifies the time unit for each tier, such as day, week, or month.
- format: Determines the date format displayed in timeline cells.
- count: Combines multiple time units into a single timeline cell.
- formatter: Applies a custom method to format the timeline cell values programmatically.
These properties allow precise control over how time intervals are displayed, enhancing the readability and usability of the Gantt chart across various project scales.
Combining timeline cells
In the TypeScript Gantt Chart control, timeline cells in the top and bottom tiers can be merged by grouping multiple time units into a single cell. This behavior is controlled using the count property in both topTier and bottomTier configurations.
- topTier.count: Specifies the number of time units to combine in each top-tier cell.
- bottomTier.count: Specifies the number of time units to combine in each bottom-tier cell.
By adjusting these values, the timeline can display broader or more granular intervals, improving visibility for long-term or short-term project views.
Format value of timeline cell
In the TypeScript Gantt Chart control, the values displayed in the top and bottom timeline cells can be formatted using either standard date format strings or custom formatter methods.
- topTier.format and bottomTier.format: Define the date format for timeline cells using predefined format strings.
- topTier.formatter and bottomTier.formatter: Apply custom logic to format timeline cell values programmatically.
Formatter Function Parameters:
The formatter function supports the following parameters:
| Parameter | Description |
|---|---|
| date | The current date value for the cell. |
| format | The date format string applied to the cell. |
| tier | Indicates whether the cell belongs to the topTier or bottomTier. |
| mode | Specifies the rendering mode (Year, Month, Week, or Day). |
The following example shows how to use the formatter function with all four parameters date, format, tier, and mode:
Timeline cell width
In the TypeScript Gantt Chart control, the width of timeline cells can be configured using the timelineSettings.timelineUnitSize property within timelineSettings. This value directly sets the width of the bottom tier cells.
The width of the top tier cells is automatically calculated based on the bottom tier’s unit and the specified timelineUnitSize. This ensures consistent scaling across both tiers while maintaining clarity in the timeline view.
- timelineSettings.timelineUnitSize: Defines the pixel width of each bottom-tier timeline cell.
- topTier.unit: Determines how the top-tier cell width is derived relative to the bottom tier.
This configuration allows precise control over the visual density of the timeline, supporting both detailed and high-level project views.