How to align label in connector

[Wanlop]

Hello,

I had create Horizontal Straight segment connector from 100,1000 to 200,100 by c#. Add one label.

BUT I'm not able to set the label draw above the connector line segment.

VerticalAlignment to Bottom + Offset.Y are not help. Text still be in the center.

Please help.

[Shyam G]

Hi Wanlop, 

Please use label’s alignment property to achieve your requirement. Please refer to the code example and sample below. 

Code example: 

Syncfusion.JavaScript.DataVisualization.Models.Diagram.Label label = new Syncfusion.JavaScript.DataVisualization.Models.Diagram.Label(); 

 label.Alignment = LabelAlignment.Before; 

  connector.Labels.Add(label); 

Sample:https://www.syncfusion.com/downloads/support/directtrac/general/ze/label_alignment-16145413-905592991.zip 

Regards, 

Shyam G 

[Wanlop]

Hello Shyam,

Thank you very much. The result getting a lot better now. BUT the label looks nice locate when the connector segment is rotated from -45 to 45 degree.

bigger than 45 (or smaller than -45) will NOT.. until more than 135 then OK again..to 225..then more than 225 will NOT again.

Is it bug or more setting needed?

Regards, 

[Shyam G]

Hi Wanlop, 

Please use label’s RelativeMode and VerticalAlignment property to achieve your requirement. Please refer to the code example. 

Code example: 

Syncfusion.JavaScript.DataVisualization.Models.Diagram.Label label = new Syncfusion.JavaScript.DataVisualization.Models.Diagram.Label(); 

                label.RelativeMode = LabelRelativeMode.SegmentBounds; 

                label.VerticalAlignment = VerticalAlignment.Bottom; 

                connector.Labels.Add(label); 

Sample:https://www.syncfusion.com/downloads/support/directtrac/general/ze/labelsample-1740597627-422404290.zip 

Regards, 

Shyam G 

[Wanlop]

Hello Shyam,

A lot better now. BUT still... about vertical angle (both to North or to South). The label then place in the middle on the segment.. back to the original issue.

Regards,

[Kameshwaran R]

Hi Wanlop,  

 

This is the default behavior of the connector. 

 

When we use the below code snippet, the connector label have been updated based on the segment angle of the connector. 

 

label.Alignment = LabelAlignment.Before;   

 

When we use the below code snippet, the connector label have been updated based on the bounds of the connectors. 

 

 label.RelativeMode = LabelRelativeMode.SegmentBounds;  

 

 label.VerticalAlignment = VerticalAlignment.Bottom;  

 

Please let me know if you have any concerns. 

 

Regards, 

Kameshwaran R. 

[Wanlop]

Hello Shyam,

I found that

ConnectorConstraints.DragLabel

helps me solve the issue.

Thanks again.

[Shyam G]

Hi Wanlop, 

Please let us know if you need further assistance on this. 

Regards, 

Shyam G 

[Wanlop]

Hello Shyam,

I thought, I almost done.. until I found new issue about rendering label this morning.

I create Node as BasicShapes.Path

PathData = "M 0,0 L 1,0 M 0,1 M 0,-1" (I have more complex, this is the simplest. I need to have M 0,1 M 0,-1 to balance space above and below line, so the line is at middle)

Pivot = (0 , 0.5)

Then add Label with Offset.Y=0.45f and VerticalAlignment.Bottom

I got what I need BUT.. NOT every today's browsers.

MS Edge, IE, Chrome are perfect. I got the line at middle and label above the line.

Safari, FireFox are NOT OK. I got the line draw at the top of node space and label place under the line.

Any suggestion?

[Shyam G]

Hi Wanlop, 

Please look into the below screenshot and confirm us whether the reported issue is same as shown in the screenshot. If we misunderstood your requirement, please provide us more details such as screenshot or video. 

Screenshot: 

Chrome browser	Firefox browser

Regards, 

Shyam G 

[Wanlop]

Hello Shyam,

Yes, the rendering of node "New Idea Identified" is the result that I am facing right now.

So, the App won't give result as I expect in some browser :(

Oh!! just found that Chrome in iOS also give result as Safari.. mean that the App don't work in iOS at all

[Shyam G]

Hi Wanlop, 

 

We considered your requirement as an issue and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

                                                                                                                                     

Regards, 

Shyam G