Event Markers in React Gantt Chart Component

12 Jan 202623 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 DayMarkersService injection in the AppModule providers section to enable rendering functionality. This service manages marker positioning, styling, and timeline integration logic.

Multiple marker support: The component 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 DayMarkersService injection to enable proper rendering and timeline integration.

The following implementation demonstrates event marker integration within a Gantt chart, showcasing timeline-wide event highlighting:

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { DayMarkers } from '@syncfusion/ej2-react-gantt';
import { projectNewData } from './datasource';

function App() {
    const taskSettings = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const 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' }
    ];

    return (
        <GanttComponent
            height="430px"
            dataSource={projectNewData}
            taskFields={taskSettings}
            eventMarkers={eventMarkers}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="100" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="150" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="150" />
                <ColumnDirective field="Progress" headerText="Progress" width="150" />
            </ColumnsDirective>
            <Inject services={[DayMarkers]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { DayMarkers } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel } from '@syncfusion/ej2-gantt';
import { projectNewData } from './datasource';

function App() {
    const taskSettings: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const eventMarkers: object[] = [
        { 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' }
    ];

    return (
        <GanttComponent
            height="430px"
            dataSource={projectNewData}
            taskFields={taskSettings}
            eventMarkers={eventMarkers}
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" width="100" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="150" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="150" />
                <ColumnDirective field="Progress" headerText="Progress" width="150" />
            </ColumnsDirective>
            <Inject services={[DayMarkers]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		
       .e-gantt .e-gantt-chart .e-custom-event-marker {
            width: 1px;
            border-left: 2px green dotted;
        }

    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</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.

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { DayMarkers } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { projectNewData } from './datasource';

function App() {
    let ganttRef = null;
    let eventMarkersEnabled = true;

    const taskSettings = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const 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' }
    ];

    const toggleEventMarkers = () => {
        if (ganttRef) {
            ganttRef.eventMarkers = eventMarkersEnabled ? [] : [...defaultMarkers];
        }
        eventMarkersEnabled = !eventMarkersEnabled;
    };

    return (
        <div>
            <div style=>
                <ButtonComponent onClick={toggleEventMarkers}>Event Markers</ButtonComponent>
            </div>
            <GanttComponent
                height="430px"
                dataSource={projectNewData}
                taskFields={taskSettings}
                eventMarkers={defaultMarkers}
                ref={gantt => ganttRef = gantt}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" width="100" />
                    <ColumnDirective field="TaskName" headerText="Task Name" width="150" />
                    <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                    <ColumnDirective field="Duration" headerText="Duration" width="150" />
                    <ColumnDirective field="Progress" headerText="Progress" width="150" />
                </ColumnsDirective>
                <Inject services={[DayMarkers]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { DayMarkers } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TaskFieldsModel } from '@syncfusion/ej2-gantt';
import { projectNewData } from './datasource';

function App() {
    let ganttRef: GanttComponent | null = null;
    let eventMarkersEnabled = true;

    const taskSettings: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const defaultMarkers: object[] = [
        { 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' }
    ];

    const toggleEventMarkers = () => {
        if (ganttRef) {
            ganttRef.eventMarkers = eventMarkersEnabled ? [] : [...defaultMarkers];
        }
        eventMarkersEnabled = !eventMarkersEnabled;
    };

    return (
        <div>
            <div style=>
                <ButtonComponent onClick={toggleEventMarkers}>Event Markers</ButtonComponent>
            </div>
            <GanttComponent
                height="430px"
                dataSource={projectNewData}
                taskFields={taskSettings}
                eventMarkers={defaultMarkers}
                ref={gantt => ganttRef = gantt}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" width="100" />
                    <ColumnDirective field="TaskName" headerText="Task Name" width="150" />
                    <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                    <ColumnDirective field="Duration" headerText="Duration" width="150" />
                    <ColumnDirective field="Progress" headerText="Progress" width="150" />
                </ColumnsDirective>
                <Inject services={[DayMarkers]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		
       .e-gantt .e-gantt-chart .e-custom-event-marker {
            width: 1px;
            border-left: 2px green dotted;
        }

    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

See Also

• How to bind data to the Gantt chart?
• How to enable context menu in Gantt chart?
• How to compare planned vs. actual schedules?
• How to visualize critical tasks in Gantt chart?
• How to highlight task-specific events?