Project Chart
Tasks (Actual)
A task is the main element of the Project chart. It shows the actual duration of a task, while the planned duration is represented by the baseline.
The sections below explain how to adjust the three task types available: regular tasks, parent tasks, and milestones. In the last section, there is a sample showing how their settings look like.
To learn more about the difference between the types and data fields used to set them, see Project Chart: Tasks.
Regular Tasks
Regular tasks are tasks that do not have child elements. They are defined as instances of the anychart.core.gantt.elements.TasksElement class.
To configure regular tasks, combine getTimeline() and tasks() 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
- progress() to access progress bars
// configure the height of tasks chart.getTimeline().tasks().height(15);
Please note that these settings affect parent tasks as well, but are overridden by their own settings.
Parent Tasks
Parent tasks are tasks that have child elements. They are defined as instances of the anychart.core.gantt.elements.GroupingTasksElement class.
To configure parent tasks, combine getTimeline() and groupingTasks() 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
- progress() to access progress bars
// configure the height of parent tasks
chart.getTimeline().groupingTasks().height(15);
Please note: the settings of regular tasks affect parent tasks as well, but are overridden by the settings listed here.
Also, you can expand or collapse parent tasks and display previews of milestones on them.
Milestones
Milestones are tasks with zero duration, representing events. They are defined as instances of the anychart.core.gantt.elements.MilestonesElement class.
To configure milestones, combine getTimeline() and milestones() with the following methods:
- markerType() + enums from anychart.enums.MarkerType to set the type
- fill(), stroke(), and height() to set the fill, stroke, and height
- anchor() to set the anchor
- labels() to access labels
- normal() and selected() to access states
- edit() to access the Live Edit settings
- rendering() to access the rendering settings
- preview() to access previews of milestones on parent tasks
// configure the height of milestones
chart.getTimeline().milestones().height(15);
If you need to create multiple milestones in one row, use an alternative way to visualize events - add markers.
Previews of milestones are special elements that represent milestones on their parent tasks. By default, previews are not shown. To display or hide them, pass true or false to the preview() method.
Previews inherit the settings of milestones they represent, but you can change their fill, stroke, type, etc. - combine preview() with methods of the anychart.core.gantt.elements.MilestonesPreviewElement class. Please note that with the help of the depth() method you can set the depth of previews.
Sample
In the sample below, the tasks(), groupingTasks(), and milestones() methods of the timeline are used to access regular tasks, parent tasks, and milestones.
The normal() and selected() methods of each task type are combined with fill() and stroke() to configure the appearance settings in two states: normal and selected.
Also, markerType() and preview() are used to set the type of milestones and enable their previews on the parent task.
// configure tasks
var tasks = chart.getTimeline().tasks();
tasks.normal().fill("#455a64 0.5");
tasks.selected().fill("#dd2c00");
tasks.normal().stroke("#455a64");
tasks.selected().stroke("#dd2c00");
// configure parent tasks
var parentTasks = chart.getTimeline().groupingTasks();
parentTasks.normal().fill("#00838f");
parentTasks.selected().fill("#dd2c00");
parentTasks.normal().stroke("#00838f");
parentTasks.selected().stroke("#dd2c00");
// configure milestones
var milestones = chart.getTimeline().milestones();
milestones.normal().fill("#dd2c00 0.5");
milestones.selected().fill("#dd2c00");
milestones.normal().stroke("#dd2c00");
milestones.selected().stroke("#dd2c00");
milestones.markerType("circle");
milestones.preview(true);
Baselines (Planned)
Baselines are elements showing the planned duration of regular tasks and parent tasks. They are defined as instances of the anychart.core.gantt.elements.BaselinesElement class.
To configure baselines, combine getTimeline() and baselines() 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
- above() to place baselines above tasks
- labels() to access labels
- normal() and selected() to access states
- edit() to access the Live Edit settings
- rendering() to access the rendering settings
Please note: by default, baselines are shown under tasks, but can be placed above them with the help of the above() method.
To learn about data fields used to set baselines, see Progress Chart: Baselines.
In the sample below, the baselines() method is used to access baselines. The normal() and selected() methods are combined with fill() and stroke() to configure the appearance settings in two states: normal and selected. Finally, the above() method places baselines above tasks.
// configure baselines
baselines = chart.getTimeline().baselines();
baselines.normal().fill("#dd2c00 0.3");
baselines.normal().stroke(null);
baselines.selected().fill("#ef6c00 0.3");
baselines.selected().stroke(null);
baselines.above(true);
Progress Bars
Progress bars are elements showing the progress of regular tasks and parent tasks. They are defined as instances of the anychart.core.gantt.elements.ProgressElement class.
To access progress bars, first access regular or parent tasks by combining getTimeline() with tasks() or groupingTasks(). Then call progress().
To configure progress bars, use 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
Please note: by default, progress is shown in labels of tasks. However, progress bars have their own labels. You can enable them and use to show progress or any other information.
To learn about data fields used to set progress bars, see Project Chart: Progress Bars.
In the sample below, the progress() method is used to access progress bars of both regular and parent tasks. The normal() and selected() methods are combined with fill() and stroke() to configure the appearance settings in two states: normal and selected.
// configure progress bars of regular tasks
var tasks = chart.getTimeline().tasks();
tasks.progress().normal().fill("#dd2c00");
tasks.progress().selected().fill("#455a64 0.5");
tasks.progress().selected().stroke("#455a64");
// configure progress bars of parent tasks
var parentTasks = chart.getTimeline().groupingTasks();
parentTasks.progress().normal().fill(null);
parentTasks.progress().selected().fill(null);
parentTasks.progress().selected().stroke(null);
Connectors
Connectors are elements showing the dependencies between all task types. 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 Project 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");