class anychart.core.gantt.elements.ConnectorElement Improve this Doc

Connector element settings.

Methods Overview

Coloring
fill()	Connector fill settings.
previewStroke()	Connector preview stroke settings.
stroke()	Connector stroke settings.
Interactivity
normal()	Normal state settings.
selected()	Selected state settings.

Methods Description

fill

fill()Since version 8.2.0

Getter for the connector fill.

Returns:

anychart.graphics.vector.Fill | string - Connector fill.

fill(fillFunction)Since version 8.2.0

Setter for fill settings using function.

Params:

Name	Type	Default	Description
fillFunction	function():anychart.graphics.vector.Fill	function() { }	Function that looks like: function(){ // this.sourceColor - Color with type anychart.graphics.vector.Fill (directly resolvable color). Type is anychart.graphics.vector.Fill, anychart.graphics.vector.PatternFill. The color is set from a theme or palette and is determined automatically for each colorized element. // this.fromItem - the item of the visual element from which the connector is drawn. Type is anychart.data.Tree.DataItem or anychart.data.TreeView.DataItem // this.fromItemIndex - the item linear index of the visual element from which the connector is drawn. Type is number // this.toItem - the item of the visual element to which the connector is drawn. Type is anychart.data.Tree.DataItem or anychart.data.TreeView.DataItem // this.toItemIndex - the item linear index of the visual element to which the connector is drawn. Type is number // this.connType - connector type. Type is anychart.enums.ConnectorType // this.fromPeriod - the period of the visual element from which the connector is drawn. Type is object. A period object with the index this.periodIndex at the data point this.item, corresponding to the visual display element. Works only with anychart#ganttResource // this.fromPeriodIndex - the period index of the visual element from which the connector is drawn. // this.toPeriod - the period of the visual element to which the connector is drawn. Type is object. A period object with the index this.periodIndex at the data point this.item, corresponding to the visual display element. Works only with anychart#ganttResource // this.toPeriodIndex - the period index of the visual element to which the connector is drawn. return fillValue; // type anychart.graphics.vector.Fill }

Name

Type

Default

Description

fillFunction

function():anychart.graphics.vector.Fill

function() {
}

Function that looks like:

function(){
   // this.sourceColor - Color with type anychart.graphics.vector.Fill (directly resolvable color).
   Type is anychart.graphics.vector.Fill, anychart.graphics.vector.PatternFill. The color is set from a theme
   or palette and is determined automatically for each colorized element.
   // this.fromItem - the item of the visual element from which the connector is drawn. Type is anychart.data.Tree.DataItem or anychart.data.TreeView.DataItem
   // this.fromItemIndex - the item linear index of the visual element from which the connector is drawn. Type is number
   // this.toItem - the item of the visual element to which the connector is drawn. Type is anychart.data.Tree.DataItem or anychart.data.TreeView.DataItem
   // this.toItemIndex - the item linear index of the visual element to which the connector is drawn. Type is number
   // this.connType - connector type. Type is anychart.enums.ConnectorType
   // this.fromPeriod - the period of the visual element from which the connector is drawn. Type is object. A period object with the index
   this.periodIndex at the data point this.item, corresponding to the visual display element. Works only with anychart#ganttResource
   // this.fromPeriodIndex - the period index of the visual element from which the connector is drawn.
   // this.toPeriod - the period of the visual element to which the connector is drawn. Type is object. A period object with the index
   this.periodIndex at the data point this.item, corresponding to the visual display element. Works only with anychart#ganttResource
   // this.toPeriodIndex - the period index of the visual element to which the connector is drawn.

   return fillValue; // type anychart.graphics.vector.Fill
}

Returns:

anychart.core.ui.Timeline - Self instance for method chaining.

Try it:

Usage sample

fill(color, cx, cy, opacityOrMode, opacity, fx, fy)Since version 8.2.0

Setter for connector fill settings using an object or a string. Learn more about coloring.

Detailed description

Connector fill is a fill of arrow of a connector on the timeline.

Params:

Name	Type	Default	Description
color	anychart.graphics.vector.Fill \| !Array.<(anychart.graphics.vector.GradientKey\|string)> \| null	'#000090'	Fill settings.
cx	number		X ratio of center radial gradient.
cy	number		Y ratio of center radial gradient.
opacityOrMode	anychart.graphics.math.Rect		If defined then userSpaceOnUse mode, else objectBoundingBox.
opacity	number		Opacity.
fx	number		X ratio of focal point.
fy	number		Y ratio of focal point.

Returns:

anychart.core.gantt.elements.ConnectorElement - Self instance for method chaining.

Try it:

normal

normal()Since version 8.2.0

Getter for normal state settings.

Returns:

anychart.core.StateSettings - Normal state settings.

Try it:

Usage sample

normal(settings)Since version 8.2.0

Setter for normal state settings.

Params:

Name	Type	Description
settings	Object	State settings to set.

Returns:

anychart.core.gantt.elements.ConnectorElement - Self instance for method chaining.

Try it:

Usage sample

previewStroke

previewStroke()Since version 8.3.0

Getter for the connector preview stroke.

Returns:

anychart.graphics.vector.Stroke | string - Connector preview stroke.

See listing

var connectors = timeLine.connectors();
var previewStroke = connectors.previewStroke();

previewStroke(color, thickness, dashpattern, lineJoin, lineCap)Since version 8.3.0

Setter for the connector preview stroke. Learn more about stroke settings.

Detailed description

To display connector preview you can move mouse cursor on the task and then drag-and-drop it to desired task.

Params:

Name	Type	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string \| null	Stroke settings.
thickness	number	Line thickness.
dashpattern	string	Controls the pattern of dashes and gaps used to stroke paths.
lineJoin	string \| anychart.graphics.vector.StrokeLineJoin	Line join style.
lineCap	string \| anychart.graphics.vector.StrokeLineCap	Line cap style.

Returns:

anychart.core.gantt.elements.ConnectorElement - Self instance for method chaining.

Try it:

Usage sample

selected

selected()Since version 8.2.0

Getter for selected state settings.

Returns:

anychart.core.StateSettings - Selected state settings

Try it:

Usage sample

selected(settings)Since version 8.2.0

Setter for selected state settings.

Params:

Name	Type	Description
settings	Object	State settings to set.

Returns:

anychart.core.gantt.elements.ConnectorElement - Self instance for method chaining.

Try it:

Usage sample

stroke

stroke()Since version 8.2.0

Getter for the connector stroke settings.

Returns:

anychart.graphics.vector.Stroke | string - Connector stroke settings.

stroke(color, thickness, dashpattern, lineJoin, lineCap)Since version 8.2.0

Setter for the connector stroke settings. Learn more about stroke settings.

Detailed description

Connector stroke is a stroke of connector's line on timeline.

Params:

Name	Type	Default	Description
color	anychart.graphics.vector.Stroke \| anychart.graphics.vector.ColoredFill \| string \| null		Stroke settings.
thickness	number	1	Line thickness.
dashpattern	string		Controls the pattern of dashes and gaps used to stroke paths.
lineJoin	string \| anychart.graphics.vector.StrokeLineJoin		Line join style.
lineCap	string \| anychart.graphics.vector.StrokeLineCap		Line join style.

Returns:

anychart.core.gantt.elements.ConnectorElement - Self instance for method chaining.

Try it:

Usage sample

stroke(strokeFunction)Since version 8.2.0

Setter for connector stroke settings using function.

Params:

Name	Type	Default	Description
strokeFunction	function():anychart.graphics.vector.Stroke\|anychart.graphics.vector.ColoredFill	function() { }	Function that looks like: function(){ // this.sourceColor - Color with type anychart.graphics.vector.Stroke (directly resolvable color). Type is anychart.graphics.vector.Stroke. The color is set from a theme or palette and is determined automatically for each colorized element. // this.fromItem - the item of the visual element from which the connector is drawn. Type is anychart.data.Tree.DataItem or anychart.data.TreeView.DataItem // this.fromItemIndex - the item linear index of the visual element from which the connector is drawn. Type is number // this.toItem - the item of the visual element to which the connector is drawn. Type is anychart.data.Tree.DataItem or anychart.data.TreeView.DataItem // this.toItemIndex - the item linear index of the visual element to which the connector is drawn. Type is number // this.connType - connector type. Type is anychart.enums.ConnectorType // this.fromPeriod - the period of the visual element from which the connector is drawn. Type is object. A period object with the index this.periodIndex at the data point this.item, corresponding to the visual display element. Works only with anychart#ganttResource // this.fromPeriodIndex - the period index of the visual element from which the connector is drawn. // this.toPeriod - the period of the visual element to which the connector is drawn. Type is object. A period object with the index this.periodIndex at the data point this.item, corresponding to the visual display element. Works only with anychart#ganttResource // this.toPeriodIndex - the period index of the visual element to which the connector is drawn. return strokeValue; // type anychart.graphics.vector.Stroke }

Name

Type

Default

Description

strokeFunction

function():anychart.graphics.vector.Stroke|anychart.graphics.vector.ColoredFill

function() {
}

Function that looks like:

function(){
   // this.sourceColor - Color with type anychart.graphics.vector.Stroke (directly resolvable color).
   Type is anychart.graphics.vector.Stroke. The color is set from a theme or palette and is determined automatically for each colorized element.
   // this.fromItem - the item of the visual element from which the connector is drawn. Type is anychart.data.Tree.DataItem or anychart.data.TreeView.DataItem
   // this.fromItemIndex - the item linear index of the visual element from which the connector is drawn. Type is number
   // this.toItem - the item of the visual element to which the connector is drawn. Type is anychart.data.Tree.DataItem or anychart.data.TreeView.DataItem
   // this.toItemIndex - the item linear index of the visual element to which the connector is drawn. Type is number
   // this.connType - connector type. Type is anychart.enums.ConnectorType
   // this.fromPeriod - the period of the visual element from which the connector is drawn. Type is object. A period object with the index
   this.periodIndex at the data point this.item, corresponding to the visual display element. Works only with anychart#ganttResource
   // this.fromPeriodIndex - the period index of the visual element from which the connector is drawn.
   // this.toPeriod - the period of the visual element to which the connector is drawn. Type is object. A period object with the index
   this.periodIndex at the data point this.item, corresponding to the visual display element. Works only with anychart#ganttResource
   // this.toPeriodIndex - the period index of the visual element to which the connector is drawn.

    return strokeValue; // type anychart.graphics.vector.Stroke
}

Returns:

anychart.core.gantt.elements.ConnectorElement - Self instance for method chaining.

Try it:

Usage sample

stroke(settings)Since version 8.2.0

Setter for connector stroke settings using object.

Params:

Name	Type	Description
settings	Object	Object with stroke settings from anychart.graphics.vector.Stroke

Returns:

anychart.core.gantt.elements.ConnectorElement - Self instance for method chaining.

Try it:

Usage sample