diff --git a/ej2-react/gantt/event-markers.md b/ej2-react/gantt/event-markers.md index 87a2fbab6..9f32e506a 100644 --- a/ej2-react/gantt/event-markers.md +++ b/ej2-react/gantt/event-markers.md @@ -28,7 +28,7 @@ To highlight the days, inject the [`DayMarkers`](https://ej2.syncfusion.com/reac {% previewsample "page.domainurl/code-snippet/gantt/event-markers-cs1" %} -# Managing event marker overlapping in react gantt component +## Managing event marker overlapping in react gantt component In the EJ2 Gantt control, it is possible to customize multiple [`eventMarkers`](https://ej2.syncfusion.com/react/documentation/api/gantt/eventMarker/) for the same date. However, by default, in such scenarios, these markers may overlap each other, resulting in visual clutter. To manage this, the following sample code demonstrates how to utilize the Gantt dataBound function to obtain label and arrow classes. It performs a loop action to fulfill the current requirement and to avoid overlapping. For further clarification, the code snippet below illustrates the flow of its implementation. @@ -48,7 +48,7 @@ In the EJ2 Gantt control, it is possible to customize multiple [`eventMarkers`]( >Note: The above-provided sample will only be applicable when using more than one [`eventMarkers`](https://ej2.syncfusion.com/react/documentation/api/gantt/eventMarker/) for the same date. However, it is not applicable for default scenarios. -# Label positions in react gantt control +## Label positions in react gantt control The EJ2 Gantt chart offers powerful features for customizing various labels position within the chart, enabling users to present relevant project information clearly. In EJ2 Gantt chart, labelSettings feature provides three key options for label customization: [`rightLabel`](https://ej2.syncfusion.com/react/documentation/api/gantt/labelSettings/#rightlabel), [`taskLabel`](https://ej2.syncfusion.com/react/documentation/api/gantt/labelSettings/#tasklabel), and [`leftLabel`](https://ej2.syncfusion.com/react/documentation/api/gantt/labelSettings/#leftlabel). Label positions can be initialized by using the [`labelSettings`](https://ej2.syncfusion.com/react/documentation/api/gantt/labelSettings/) property. @@ -68,7 +68,7 @@ The following code example shows how to add label positions in the gantt control {% previewsample "page.domainurl/code-snippet/gantt/labelposition-cs1" %} -# Displaying eventMarkers in stacked manner +## Displaying eventMarkers in stacked manner When [`eventMarkers`](https://ej2.syncfusion.com/react/documentation/api/gantt/eventMarker/) are given in consecutive dates and zoomToFit is performed, they may overlap. To avoid this, you can update the position of the eventMarkers in the [dataBound](https://ej2.syncfusion.com/react/documentation/api/gantt/#databound) and [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/gantt/#actioncomplete) events so that they are not overlapped and are visible to read.