Basic Settings
Overview
This article describes the basic settings of the Gantt chart, which is defined as an instance of the anychart.charts.Gantt class.
Please note that the settings listed here can be applied both to Project and Resource charts.
Appearance
This section explains how to configure the appearance settings of the Gantt chart and its components.
Background
To configure the background of the chart, call the background() method.
Note: You can apply different background settings to the data grid and timeline - see Data Grid: Appearance and Timeline: Appearance.
This is how the background is adjusted:
// configure the background of the chart
chart.background("#64b5f6 0.2");
Rows and Columns
To configure the appearance of rows and columns, use these methods:
- rowHoverFill() to set the fill of rows when they are being hovered over
- rowSelectedFill() to set the fill of rows when they are being selected
- rowStroke() to set the stroke of rows
- columnStroke() to set the stroke of columns
Note: These settings (except for the row stroke) can be applied separately to the data grid and timeline, as shown in the Data Grid: Appearance and Timeline: Appearance sections. Also, there you can find some other appearance settings available for rows.
Here is a Gantt chart with the appearance of rows and columns configured:
// configure the visual settings of rows and columns
chart.rowHoverFill("#ffd54f 0.3");
chart.rowSelectedFill("#ffd54f 0.3");
chart.rowStroke("0.5 #64b5f6");
chart.columnStroke("0.5 #64b5f6");
Data Grid
A data grid is a part of the Gantt chart where names of its elements are displayed. You can configure its background as well as the appearance of rows, columns, header, and buttons - see Data Grid: Appearance and Data Grid: Buttons.
Timeline
A timeline is a part of the Gantt chart where its elements (time intervals) are displayed. You can configure its background as well as the appearance of rows, columns, and header - see Timeline: Appearance and Timeline: Header.
Elements
Timeline elements are parts of the Gantt chart that are shown on the timeline and represent time intervals as well information related to them.
For different types of elements, different appearance (and other) settings are available. Read articles in the Elements section to learn more.
Custom Drawing
The Custom Drawing article explains how to replace default timeline elements with custom drawings.
Title
With the help of the title() method, the title of the Gantt chart is adjusted:
// enable and configure the chart title
var title = chart.title();
title.enabled(true);
title.text("Gantt Chart: Title");
title.fontColor("#64b5f6");
title.fontSize(18);
title.fontWeight(600);
title.padding(5);
Header and Row Height
To set the height of rows and the header, use defaultRowHeight() and headerHeight().
Note 1: The rowHeight data field allows setting the height of an indvidual row. Levels of the header can be also adjusted individually, as explained in Header: Level Height.
Note 2: Timeline elements automatically adjust to the row height. However, you can set their heights manually - see articles about different types of elements in the Elements section.
In the sample below, there is a Gantt chart with the row and header height configured:
// set the row height
chart.defaultRowHeight(35);
// set the header height
chart.headerHeight(105);
Splitter
To set the default position of the splitter between the data grid and the timeline, call the splitterPosition() method.
Note: The width of the timeline automatically adjusts to the area outlined by the splitter. The width of the data grid is not affected - it is defined only by the sum of its columns' widths.
In the following sample, there is a Gantt chart with the splitter position configured:
// set the position of the splitter
chart.splitterPosition("50%");
Navigation
This section explains how to draw a Gantt chart with certain navigation settings - elements expanded or collapsed, timeline scrolled, etc.
Please note that all the methods listed here work only after the chart is drawn.
Expanding / Collapsing
If there are hierarchical relationships between data items, parent tasks or resources as well as their labels on the data grid can be expanded or collapsed with the help of data grid buttons or special methods. By default, Gantt charts are drawn with all elements expanded.
Note: See the Data Grid: Buttons section to learn how to configure buttons.
Use the following methods to expand or collapse elements:
- expandAll() to expand all tasks
- collapseAll() to collapse all tasks
- expandTask() to expand a task with a given id
- collapseTask() to collapse a task with a given id
// collapse all tasks
chart.collapseAll();
// collapse the given task
chart.collapseTask("2");
In addition to the collapseTask() and expandTask() methods, you can collapse or expand an individual element by specifying the true / false value in the collapsed data field.
In the following sample, the second root task (PR Campaign) is collapsed by default:
{
id: "2",
name: "PR Campaign",
actualStart: "2018-02-15",
actualEnd: "2018-03-22",
collapsed: true,
children: [
{
id: "2_1",
name: "Planning",
actualStart: "2018-02-15",
actualEnd: "2018-03-10"
},
{
id: "2_2",
name: "Promoting",
actualStart: "2018-03-11",
actualEnd: "2018-03-22"
}
]}
Fitting to Width
You can fit all elements or a single element to the width of the timeline. Use the methods below:
- fitAll() to fit all elements
- fitToTask() to fit an element with a given id
// fit all elements to the width of the timeline
chart.fitAll();
// fit the given element to the width of the timeline
chart.fitToTask("1_2");
Zooming
To zoom the timeline, use the following methods:
The zoomIn() and zoomOut() methods allow (but not require) setting the zoom factor, which is 2 by default:
// zoom the timeline in
chart.zoomIn(3);
The zoomTo() method allows zooming either to a range of dates or to a range of units.
To set a range of dates, specify two timestamps as parameters:
// zoom the timeline to the given dates
chart.zoomTo(Date.UTC(2018, 1, 3), Date.UTC(2018, 1, 6));
To set a range of time units, specify three parameters: unit, count (the number of units), and anchor:
// zoom the timeline to the given units
chart.zoomTo("week", 2, "first-date");
The available time units are listed in anychart.enums.Interval:
"millisecond""second""minute""hour""day""week""third-of-month""month""quarter""semester""year"
The available anchors are listed in anychart.enums.GanttRangeAnchor:
"first-date""first-visible-date""last-date""last-visible-date"
The sample below shows how zooming methods work:
Scrolling
You can scroll the chart vertically to a certain position. Use these methods:
- scrollTo() to scroll to a given value (in pixels)
- scrollToRow() and scrollToEnd() to scroll to a row with a given index
The scrollTo() method requires specifying the scroll position in pixels:
// scroll the chart to the given value
chart.scrollTo(110);
The scrollToRow() and scrollToEnd() methods display the given row either at the beginning or at the end of the visible area if it is possible. Please note that the numbering of rows starts from 0.
// scroll the chart to the given row
chart.scrollToRow(6);
// scroll the chart to the given row
chart.scrollToEnd(6);
The following sample shows how scrolling methods work: