DisplayLinkType class (Gantt)

The arrow field specifies the color of the link's arrow. If undefined, the arrow uses the link's color. The color field specifies the link color (any CSS color format). The arrowShape field defines a custom shape for the arrow, as an object of exontrol.Def.Shape type. The arrowSize field specifies the size of the arrow. The dir field determines whether the link's direction arrows are displayed.

null {null}, arrow uses link's color
"transparent" {string}, transparent arrow
"red" {string}, red arrow
"#00FF00" {string}, green arrow
"rgba(255,0,0,0.5)" {string}, 50% red arrow

The arrowShape field defines a custom shape for the arrow, as an object of exontrol.Def.Shape type. The arrowSize field specifies the size of the arrow. The arrow field specifies the color of the link's arrow. If undefined, the arrow uses the link's color. The color field specifies the link color (any CSS color format). The dir field determines whether the link's direction arrows are displayed.

null {null}, default triangle arrow
{primitive: "Circle"} {object}, circular arrow
{primitive: "Rect"} {object}, rectangular arrow

The arrowSize field specifies the size of the arrow. The size is defined as the length of the arrow from its base to its tip. You can adjust the arrow size to make it more noticeable or subtle in your Gantt chart. For example, setting the arrowSize to 2 will create a larger arrow, while setting it to 0.5 will produce a smaller arrow. If you want the arrow size to match the link width, simply leave this field undefined or set it to null.

null {null}, arrow size equals link width
2 {number}, arrow size 2

The color field specifies the link color (any CSS color format). The default value is null, which creates a black link. You can customize the color of the link to enhance the visual appeal of your Gantt chart or to differentiate between different types of links. For example, setting the color to "red" will create a red link, while setting it to "#00FF00" will produce a green link. The arrow field specifies the color of the link's arrow. If undefined, the arrow uses the link's color. If you want to make the link invisible, you can set the color to "transparent".

null {null}, black link
"transparent" {string}, transparent link
"red" {string}, red link
"#00FF00" {string}, green link
"rgba(255,0,0,0.5)" {string}, 50% red link

The dir field determines whether the link's direction arrows are displayed. The default value is 2, which shows an arrow at the end of the link. You can customize the direction of the link by setting this field to different values. For example, setting it to 1 will display an arrow at the start of the link, while setting it to 3 will show arrows at both ends of the link. If you want to hide the direction arrows altogether, you can set this field to 0. This allows you to control the visual representation of the links in your Gantt chart and enhance its clarity based on your specific requirements. The dir field supports the following values:

• 0, no direction shown
• 1, arrow at link start
• 2, arrow at link end (default)
• 3, arrows at both ends

null {null}, arrow at link end (default)
0 {number}, hide direction
3 {number}, show arrows at both ends

The endPos field defines the corners of the end element where the link ends. The startPos and endPos fields can be used to specify the exact points on the elements where the link should connect, allowing for more precise control over the appearance of the links in your Gantt chart. By default, if endPos is not defined, the link will end at the point on the out-element that is closest to the in-element. You can customize this behavior by setting endPos to specific corners or combinations of corners on the out-element.

The endPos field can be any of the following:

• endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
• endPos {number}, indicates an OR combination of one or more values of exontrol.CT type
• endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"

The exontrol.CT type defines the following values:

• TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
• TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
• TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
• ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
• C (34 or 0x22), indicates the center of the object, equivalent of "C"
• MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
• BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
• BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
• BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"

null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element<br>
exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element<br>
exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)<br>
"ML" {string}, specifies that the link always ends to the middle-left point of the out-element<br>
"TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)

The startPos field defines the corners of the start element where the link begins. The startPos and endPos fields can be used to specify the exact points on the elements where the link should connect, allowing for more precise control over the appearance of the links in your Gantt chart. By default, if startPos is not defined, the link will start from the point on the in-element that is closest to the out-element. You can customize this behavior by setting startPos to specific corners or combinations of corners on the in-element.

The startPos field can be any of the following:

• startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
• startPos {number}, indicates an OR combination of one or more values of exontrol.CT type
• startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"

The exontrol.CT type defines the following values:

• TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
• TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
• TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
• ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
• C (34 or 0x22), indicates the center of the object, equivalent of "C"
• MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
• BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
• BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
• BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"

null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element<br>
exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element<br>
exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)<br>
"MR" {string}, specifies that the link always starts from the middle-right point of the in-element<br>
"TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)

The style field specifies the pattern of the link line. The style field Can be null, a number, or an array of numbers defining line and gap distances. The default value is null, which creates a solid line. If you set the style to a number, it will create a dashed line with equal dash and gap lengths. For example, setting the style to 2 will produce a dashed line with 2-pixel dashes and 2-pixel gaps. If you want to create a custom dashed pattern, you can provide an array of numbers that defines the lengths of dashes and gaps in sequence. For instance, setting the style to [5, 15, 25] will create a pattern of a 5-pixel dash followed by a 15-pixel gap and then a 25-pixel dash, repeating this pattern along the length of the link.

null {null}, solid line
[] {array}, solid line
2 {number}, repeated [2,2,...]
[5,15,25] {array}, repeated [5,15,25,5,15,25,...]

The type field specifies the type of the link. The link type determines the shape of the link between two elements in the Gantt chart. The default link type is rectangular, which creates a right-angled connection between the elements. The direct link type creates a straight line between the elements, while the straight link type creates a direct connection without any bends. The round link type creates a curved connection between the elements. You can choose the link type that best suits your visualization needs and enhances the readability of your Gantt chart.

The type supports the following values:

• exRect (0), defines a rectangular link
• exDirect (1), defines a direct link
• exStraight (2), defines a straight link
• exRound (3), defines a round link

Additionally, -1 indicates the default link type, similar to rectangular but more symmetrical.

The type member always returns "undefined"

null {null}, default link type (equivalent to -1)
0 or exontrol.LinkTypeEnum.exRect {null}, rectangular link
2 or exontrol.LinkTypeEnum.exStraight {null}, straight link

The width field specifies the thickness of the link line. The default value is 1, which creates a standard link width. You can adjust the width of the link to make it more prominent or subtle in your Gantt chart. For instance, setting the width to 2 will create a thicker link, while setting it to 0.5 will produce a thinner link. If you want to hide the link line entirely, you can set the color to transparent. This allows you to customize the visual emphasis of the links in your Gantt chart according to your design preferences and the level of detail you want to convey.

null {null}, 1-pixel wide
2 {number}, 2-pixels wide