We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to align label in connector

Thread ID:

Created:

Updated:

Platform:

Replies:

125349 Aug 10,2016 12:07 PM UTC Aug 19,2016 12:24 PM UTC ASP.NET MVC 11
loading
Tags: Diagram
Wanlop
Asked On August 10, 2016 12:07 PM UTC

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 [Syncfusion]
Replied On August 11, 2016 12:15 PM UTC

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); 


Regards, 
Shyam G 


Wanlop
Replied On August 11, 2016 01:45 PM UTC

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 [Syncfusion]
Replied On August 12, 2016 12:17 PM UTC

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); 


Regards, 
Shyam G 


Wanlop
Replied On August 12, 2016 01:22 PM UTC

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 [Syncfusion]
Replied On August 15, 2016 06:06 AM UTC

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
Replied On August 15, 2016 06:35 AM UTC

Hello Shyam,

I found that
ConnectorConstraints.DragLabel
helps me solve the issue.

Thanks again.


Shyam G [Syncfusion]
Replied On August 16, 2016 05:00 AM UTC

Hi Wanlop, 

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

Regards, 
Shyam G 


Wanlop
Replied On August 16, 2016 05:36 AM UTC

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 [Syncfusion]
Replied On August 17, 2016 10:55 AM UTC

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
Replied On August 17, 2016 02:08 PM UTC

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 [Syncfusion]
Replied On August 19, 2016 12:24 PM UTC

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. 
 
                                                                                                                                     
Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;