Resource Chart

Periods
Connectors

Periods

Periods are visual elements representing time intervals related to resources. They are defined as instances of the anychart.core.gantt.elements.PeriodsElement class.

To configure periods, combine getTimeline() and periods() with the following methods:

fill(), stroke(), and height() to set the fill, stroke, and height
anchor(), offset(), and position() to set the anchor, offset, and position
labels() to access labels
normal() and selected() to access states
edit() to access the Live Edit settings
rendering() to access the rendering settings

To learn about data fields used to set periods, see Resource Chart: Periods and Resources.

In the sample below, the periods() method is used to access periods. The normal() and selected() methods are combined with fill() and stroke() to configure the appearance settings in two states: normal and selected.

// configure periods
var periods = chart.getTimeline().periods();
periods.normal().fill("#455a64 0.5");
periods.selected().fill("#dd2c00");
periods.normal().stroke("#455a64");
periods.selected().stroke("#dd2c00");

Playground

Connectors

Connectors are elements showing the dependencies between periods. They are defined as instances of the anychart.core.gantt.elements.ConnectorElement class.

To configure connectors, combine getTimeline() and connectors() with the following methods:

fill() and stroke() to set the fill and stroke
normal() and selected() to access states
previewStroke() to set the preview stroke in the Live Edit mode

To learn about the available types of connectors and the data fields used to set them, see Resource Chart: Connectors.

In the sample below, the connectors() method is used to access connectors. The normal() and selected() methods are combined with fill() and stroke() to configure the appearance settings in two states: normal and selected.

// configure connectors
var connectors = chart.getTimeline().connectors();
connectors.normal().fill("#ffa000");
connectors.selected().fill("#ef6c00");
connectors.normal().stroke("2 #ffa000");
connectors.selected().stroke("2 #ef6c00");

Playground