This sample demonstrates how to highlight and notify important dates within a project timeline using the Gantt Chart component.
In this example, eventMarkers act as visual bookmarks to indicate key milestones or stages in the project life cycle. Each marker can display descriptive text on the corresponding date, making it easier to track progress and deadlines.
The Event Markers model provides several properties to customize the appearance and behavior of markers:
cssClass: Apply custom CSS styles to a specific marker.day: Define the exact date for the event marker.label: Display text along the vertical line to describe the event.top: Adjust the vertical position of the marker from the chart pane's content top to avoid overlap when multiple markers share the same date.
Gantt component features are segregated into individual feature-wise modules. To use selection and event marker features, we need to inject the Selection and DayMarkers into the Inject Services section respectively.
More information on the Essential® React Gantt Chart can be found in this documentation section.