Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SEO-181194-Site-Audit-Work-Multiple-H1-Ej2-React #426

Open
wants to merge 1 commit into
base: hotfix/hotfix-v25.1.35
Choose a base branch
from
Open

SEO-181194-Site-Audit-Work-Multiple-H1-Ej2-React #426

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ej2-react/gantt/event-markers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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.

Expand All @@ -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.

Expand Down