Position of annotation in liner gauge

[TaeWook Kang]

I want to change the position automatically when there is a situation where comments overlap in the liner gauge.

If it doesn't overlap, it will be displayed at the designated location, but is there a way to change the location if the annotations overlap?

Or is there a way to use the 'AnnotationRender' method to identify and reposition overlapping locations?

 <div class="col-md-8" style="margin-top: 10px; height: 500px; padding-left: 0px; padding-right: 0px;">
        <ejs-lineargauge orientation="Horizontal" width="100%" height="300px" AxisLabelRender='axisLabelRender' annotationRender="AnnotationRender" tooltipRender="TooltipRender" background="Transparent" style="display:block;" allowMargin="false">
            <e-lineargauge-margin Left="50" Top="0" Bottom="0" Right="50"></e-lineargauge-margin>
            <e-lineargauge-tooltip Enable="true" position="End"></e-lineargauge-tooltip>
            <e-lineargauge-titlestyle></e-lineargauge-titlestyle>
            <e-lineargauge-axes>
                <e-lineargauge-axis minimum="startDate" maximum="endDate" opposedPosition="true">
                    <e-axis-majorticks Interval="interval" Height="0"></e-axis-majorticks>
                    <e-axis-minorticks interval="0" height="0"></e-axis-minorticks>
                    <e-axis-line Width="10" color="#6C757D"></e-axis-line>
                    <e-axis-labelstyle offset=10 font=labelFont1></e-axis-labelstyle>
                    <e-lineargauge-pointers>
                        <e-lineargauge-pointer Value=today position="Outside" color="#0C4DA2"></e-lineargauge-pointer>
                        <e-lineargauge-pointer Type="Marker" MarkerType="Circle" Value="ifrInform" Color="#92D050" Height=13 Width=13 offset="10" Placement=Near border="border"></e-lineargauge-pointer>
                        <e-lineargauge-pointer Type="Marker" MarkerType="Circle" Value="ifcInform" Color="#FFFFFF" Height=13 Width=13 offset="10" Placement=Near border="beforeTodayBorder"></e-lineargauge-pointer>
                        <e-lineargauge-pointer Type="Marker" MarkerType="Circle" Value="endDate" Color="#0C4DA2" Height=15 Width=15 offset="7" Placement=Near></e-lineargauge-pointer>
                        <e-lineargauge-pointer Type="Marker" MarkerType="Circle" Value="ifrIssue" Color="#92D050" Height=13 Width=13 offset="10" Placement=Near border="border"></e-lineargauge-pointer>
                        <e-lineargauge-pointer MarkerType="Image" Value="ifcIssue" Color="#0C4DA2" Height=22 Width=22 Placement=Near imageUrl="@ifcroot"></e-lineargauge-pointer>
                        <e-lineargauge-pointer MarkerType="Image" Value="shopIssue" Color="#0C4DA2" Height=22 Width=22 Placement=Near imageUrl="@shoproot"></e-lineargauge-pointer>
                    </e-lineargauge-pointers>
                    <e-lineargauge-ranges>
                        <e-lineargauge-range Start="startDate" End="today" Color="#0C4DA2" StartWidth="10" EndWidth="10"></e-lineargauge-range>
                    </e-lineargauge-ranges>
                </e-lineargauge-axis>
            </e-lineargauge-axes>
            <e-lineargauge-annotations>
                <e-lineargauge-annotation Content='<div style="width: 70px;margin-left:-10%;margin-top: 38%;margin-bottom: 2px;font-size: 12px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;Today</br>@dateTimeNow</strong></div>' X="10" Y="-56" AxisValue=today AxisIndex=0 ZIndex="2"></e-lineargauge-annotation>
                <e-lineargauge-annotation Content='<div style="width: 80px;margin-left:2%;margin-top: 8%;font-size: 12px;"><strong>IFR INFORM</strong></br>&nbsp;&nbsp;2023.06.10</div>' X="0" Y="20" AxisValue=ifrInform AxisIndex=0 ZIndex="1"></e-lineargauge-annotation>
                <e-lineargauge-annotation Content='<div style="width: 70px;margin-left:10%;margin-top: 2%;font-size: 12px;"><strong>&nbsp;IFR Issue</strong></br>2023.07.30</div>' X="0" Y="-24" AxisValue=ifrIssue AxisIndex=0 ZIndex="0"></e-lineargauge-annotation>
                <e-lineargauge-annotation Content='<div style="width: 80px;margin-left:2%;margin-top: 8%;font-size: 12px;"><strong>IFC INFORM</strong></br>&nbsp;&nbsp;2023.06.10</div>' X="0" Y="20" AxisValue=ifcInform AxisIndex=0 ZIndex="1"></e-lineargauge-annotation>
            </e-lineargauge-annotations>
        </ejs-lineargauge>
    </div>



  function TooltipRender(args) {
        if (args.content == @ifrInform) {
            args.content = "<strong>Actual</strong> </br> 2023.05.26 </br> 2023.06.05 </br> 2023.06.15";
            args.tooltip.properties.textStyle.color = "black";
            args.tooltip.fill = "#FFFFCC";
        }
        else {
            args.cancel = true;
        }


    }


    function AnnotationRender(args) {
        var JobNo = sessionStorage.getItem('JobKey');
    }

[Indumathi Ravi]

Hi TaeWook,

The Linear Gauge component does not support changing the position of the annotations automatically when they overlap. We also do not support any properties for your requirement in the “annotationRender” event.

However, the annotations in the Linear Gauge component are completely customizable through their properties, such as “x”, “y”, “axisIndex”, "axisValue”, and others, as given in the below documentation link.

UG Link: https://helpej2.syncfusion.com/documentation/api/linear-gauge/annotationModel/

You can change the position of the overlapped annotation in the application using the “x” and “y” properties.

Please let us know if you need any further assistance.

[TaeWook Kang]

If so, can you find if the annotations overlap when they are generated based on the value?

[Indumathi Ravi]

Hi TaeWook,

As we informed you previously, annotations do not align automatically when overlapping content is found. To overcome the overlapping annotations, you need to adjust the position of the overlapped annotations using the "x" and "y" properties in your application. You can see the documentation at the below links about the annotation feature in the Linear Gauge component.

UG documentation: https://ej2.syncfusion.com/aspnetcore/documentation/linear-gauge/annotations#positioning-an-annotation

API documentation: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeAnnotation.html#properties

Please let us know if you need any further assistance.

[TaeWook Kang]

Yes, thank you. I have another question.

Can I change the location of the title?

[Indumathi Ravi]

Hi TaeWook,

The linear gauge component does not support changing the location of the title. However, you can use the annotation feature to position the text instead of the title in any location by adjusting the “X” and “Y” properties in the <e-lineargauge-annotation> tag. Please find the code snippet for the same below.

Code Snippet:

<ejs-lineargauge id="linear" Orientation="Horizontal">

    <e-lineargauge-annotations>

        <e-lineargauge-annotation Content="<div style='width:200px'>Design Schedule Time Line</div>" X="500" Y="160" ZIndex="1"></e-lineargauge-annotation>

    </e-lineargauge-annotations>

</ejs-lineargauge>

Please let us know if you need any further assistance.