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. Image for the cookie policy date
close icon

Confusion regarding label offset and alignment

Hi,

Based on feedback provided in an earlier incident, I was able to create a second label on some of my nodes.
The challenge I am now facing is trying to right align the text in this label.

Here's the code behind that creates the label:

label = new Label(); // Add the task identifier label
label.Offset = new DiagramPoint(0.75f, 0.1f);
//label.HorizontalAlignment = HorizontalAlignment.Right;
label.TextAlign = TextAlign.Right;
label.FontSize = 8;
label.FontColor = "blue";
label.Name = "identifierLabel";
label.BorderWidth = 1;
node.Labels.Add(label);

You can see the result in the attached video.
I would like the text to always be right aligned.
If you check out the 2nd video (one I made in PowerPoint), you can see what I would like to happen (not the real-time typing, but the end result).

What am I doing wrong?
And what does the offset really mean?  I would have thought that if was the upper left corner of the label textblock, but that doesn't seem to be the case.

Thanks for any clarification you can provide.

Jim

Attachment: Syncfusion__Label_Alignment_Challenge__31Mar2015_338aa0b9.zip

3 Replies

SG Shyam G Syncfusion Team April 1, 2015 10:55 AM UTC

Hi Jim

Thanks for using Syncfusion products.

We suggest you to set the label offset as (1,0.1f) and “HorizontalAlignment” as “Right” in order to achieve your requirement. Please refer the code snippet below.

Code snippet:

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

label.Text = "Tail";

label.Name = "label7";

label.HorizontalAlignment = HorizontalAlignment.Right;

label.TextAlign = Syncfusion.JavaScript.TextAlign.Right;
label.Offset = new DiagramPoint(1, 0.1f);

Query: And what does the offset really mean?

Please note that you can position the connector’s label using label’s offset property. The value of offset can be set between the range from 0 to 1. Please refer the below online UG documentation which represents how to use the labels offset property

Online UG documentation:
http://help.syncfusion.com/ug/js/documents/label.htm

Please let me know if any concerns.

Regards,
Shyam G



JJ Jim Jacobs April 1, 2015 03:40 PM UTC

Hi Shyam,

Thanks.  Your code worked.  I changed the 1 to 0.95 as the text was just a bit too close to the border of the node.
I'm still confused (what's new) about offset (and the doc wasn't any help).
It would appear from this exercise that if the label is right justified, then offset refers to the position relative to the node of the upper right corner of the textblock containing the label.
Is that a correct interpretation?

Thanks again

Jim


SG Shyam G Syncfusion Team April 2, 2015 12:48 PM UTC

Hi Jim

Thanks for your update.

Please note that the position of the label is based on its offset property. If you set an “HorizontalAlignment” for the label, then it gets positioned based on the label’s offset. However we will update the label offset with more information in our online UG documentation and refresh online in our volume 2, 2015 release. we have explained the label offset in the word document and provided the link below.

Link:http://www.syncfusion.com/downloads/support/forum/118681/labeloffset-671017841.zip

Please let me know if any concerns.

Regards,
Shyam G

Loader.
Live Chat Icon For mobile
Up arrow icon