How can I help you?
Event Markers in EJ2 JavaScript Gantt Chart Control
10 Apr 202611 minutes to read
Event markers highlight significant project events by displaying vertical timeline indicators that span across the entire Gantt chart. These markers identify critical dates, milestones, deadlines, or important project events that affect multiple tasks or the overall project timeline, providing visual reference points for project-wide activities.
Understanding event markers implementation enables effective visualization of project-critical dates and enhances timeline awareness across all project phases.
Event markers utilize specific properties to define their positioning, appearance, and identification within the project timeline:
Date positioning: The day property establishes the exact timeline date where the marker appears. This date value determines marker placement across the entire vertical timeline, ensuring accurate project event representation.
Descriptive labeling: The label property provides descriptive text that identifies the marker’s purpose or significance. Labels enhance user understanding by clearly indicating what project event the marker represents.
Visual customization: The cssClass property enables custom styling through CSS class applications. This property allows distinctive visual treatment for different marker types, supporting color coding, styling variations, and brand consistency.
Vertical adjustment: The top property specifies the vertical offset (in pixels) of the marker from the top of the chart pane’s content area. This property helps prevent visual overlap when multiple markers share the same date, ensuring clear and organized marker placement.
Event marker configuration
Event markers render as vertical lines positioned at specific dates across the entire Gantt chart timeline, distinguishing them from data markers which appear within individual task rows. This project-wide visibility ensures critical dates remain prominent regardless of the current view or task focus.
Timeline integration: Event markers integrate seamlessly with the Gantt chart timeline, appearing as vertical indicators that extend from the top to the bottom of the chart area. This comprehensive visibility ensures important dates remain visible during scrolling, zooming, or filtering operations.
Configuration requirements: Event markers require the DayMarkers injection in the AppModule providers section to enable rendering functionality. This service manages marker positioning, styling, and timeline integration logic.
Multiple marker support: The control supports multiple event markers simultaneously, allowing comprehensive tracking of various project-critical dates within the same timeline view. Each marker maintains independent configuration while sharing the common timeline space.
Service integration: Event marker functionality requires the eventMarkers property initialization combined with DayMarkers injection to enable proper rendering and timeline integration.
The following implementation demonstrates event marker integration within a Gantt chart, showcasing timeline-wide event highlighting:
ej.gantt.Gantt.Inject(ej.gantt.DayMarkers);
var ganttChart = new ej.gantt.Gantt({
height: '430px',
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
eventMarkers: [
{ day: new Date('2019-04-20'), label: 'Research phase ends' },
{ day: new Date('2019-05-18'), label: 'Design phase ends' },
{ day: new Date('2019-06-05'), label: 'Production phase ends' },
{ day: new Date('2019-06-20'), label: 'Sales and marketing phase starts' }
],
columns: [
{ field: 'TaskID', headerText: 'Task ID', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
]
});
ganttChart.appendTo('#Gantt');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Gantt Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css">
<style>
.e-gantt .e-gantt-chart .e-custom-event-marker {
width: 1px;
border-left: 2px green dotted;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Gantt"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>Programmatically show and hide event markers
You can programmatically show or hide event markers in the Gantt chart by updating the eventMarkers property.
var eventMarkersEnabled = true;
var defaultMarkers = [
{ day: new Date('04/09/2019'), label: 'Research phase' },
{ day: new Date('04/30/2019'), label: 'Design phase' },
{ day: new Date('05/23/2019'), label: 'Production phase' },
{ day: new Date('06/20/2019'), label: 'Sales and marketing phase' }
];
var ganttChart = new ej.gantt.Gantt({
height: '430px',
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
eventMarkers: defaultMarkers,
columns: [
{ field: 'TaskID', headerText: 'Task ID', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
]
});
ganttChart.appendTo('#Gantt');
var eventBtn = new ej.buttons.Button({ content: 'Event Markers' });
eventBtn.appendTo('#eventMarkers');
document.getElementById('eventMarkers').addEventListener('click', function () {
ganttChart.eventMarkers = eventMarkersEnabled ? [] : defaultMarkers.slice();
ganttChart.refresh();
eventMarkersEnabled = !eventMarkersEnabled;
});<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Gantt Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css">
<style>
.e-gantt .e-gantt-chart .e-custom-event-marker {
width: 1px;
border-left: 2px green dotted;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div style="margin-bottom:20px;">
<button id="eventMarkers"></button>
</div>
<div id="Gantt"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>