Resource Chart

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:

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:

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