Chart class (Gantt)

The AdjustLevelsToBase property specifies whether the units of the levels are aligned with the units of the base level. The levels are adjusted to match the base-level units. The property have effect only when multiple levels are visible in the chart. By default, the AdjustLevelsToBase property is set to false, meaning that the levels are not adjusted to match the base-level units.

true {boolean}, aligns the units of the level with units of the base-level
false {boolean}, does not align the units of the level with units of the base-level

The AllowOverviewZoom property shows or hides the time-scales on the chart's overview. The overview part of the Gantt chart displays a miniature version of the chart's bars, allowing the user to quickly scroll to a specific time-zone or date-time range. The OverviewVisible property shows or hides the control's overview. The OverviewZoomUnit property gets or sets the width of the time-unit scale in the overview. By default, the AllowOverviewZoom property is set to false, meaning that the overview does not display zooming time-scales.

false {boolean}, the overview displays no zooming time-scales
true {boolean}, the overview displays the time-scales the user can zoom to

The AllowSelectDate property gets or sets the chart's date(s) selection to single, multiple or toggle, or disables the date(s) selection. The date(s) selection is used to select date/time periods in the chart area. By default, the chart's date(s) selection is enabled for multiple-selection. The SelectDates property gets or sets the selected-dates.

0 or exontrol.Tree.SingleSelEnum.exDisableSel {number}, disables selecting any date
3 or exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel {number}, enables chart's date single selection, so only a single date can be selected
6 or exontrol.Tree.SingleSelEnum.exToggleSel | exontrol.Tree.SingleSelEnum.exSingleSel {number}, enables chart's date single and toggle selection, which means that once a date is selected it gets unselected once it is clicked, or reverse, and only a single-date can be selected at once.

The Bars property defines the control's predefined bars by assigning an object that contains a list of fields of BarOptions type. Setting the Bars property clears any existing predefined bars and replaces them with the ones specified in the provided object. The GetBars() method returns the control's bars as an object of Bars type. The Bars collection contains the bar types available in the chart. Each bar represents a display template used to render the shape of a task, milestone, or other item in the chart area. The BarOptions type defines a bar's properties, such as height, shape, captions, and more.

The following sample redefines the predefined bars of the chart:

 {
   "Task":
   {
     height: 16,
     shape:
     {
       frameColor: "darkgray",
       fillColor: "lightgray",
     },
   },
   "Progress":
   {
     shape:
     {
       pad: [0,-4],
       fillColor: "gray",
     }
   },
   "Task%Progress":
   {
     shortcut: "Task",
     def:
     {
       showPercentCaption: true,
     }
   },
 }

 Each field of the object represents a bar to add to the chart's predefined bars. The name of the field specifies the type of the bar to add, while the value of the field is an object of BarOptions type that defines the properties of the bar to add. 

The DrawDateTicker property specifies whether the chart supports date-ticker (the chart's date-ticker is visible only if the mouse pointer hovers the chart area). The DateTickerLabelHMargin property gets or sets the distance between the date-label and the bar, while create, resize or move it. The DateTickerLabelVAlign property gets or sets the vertical alignment of the date label, while create, resize or move the bar.

The <%=FORMULA%> tag (@since 2.3) holds a format-expression that supports the following keywords:

• value, {Date} defines the DATE being displayed (could be the start or end)
• start, {Date} defines the start-margin of the bar as a DATE type
• end, {Date} defines the end-margin of the bar as a DATE type

The <%DATE%> tag can be any of the following:

Name	Description	Sample
(day-patterns)
<%d%>	Day of the month using one or two numeric digits, depending on the value	1 - 31
<%dd%>	Day of the month using exactly two numeric digits	01 - 31
<%d1%>	Weekday using its first letter	S - S
<%loc_d1%>	Weekday as a single-letter abbreviation based on the current user settings	S - S
<%d2%>	Weekday using its first two letters	Su - Sa
<%loc_d2%>	Weekday as a two-letter abbreviation based on the current user settings	Su - Sa
<%d3%>	Weekday using its first three letters	Sun - Sat
<%ddd%>	Weekday using its first three letters	Sun - Sat
<%loc_d3%>	Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>	Sun - Sat
<%loc_ddd%>	Weekday as a three-letter abbreviation based on the current user regional and language settings	Sun - Sat
<%dddd%>	Full name of the weekday	Sunday - Saturday
<%loc_dddd%>	Full weekday name based on the current user regional and language settings	Sunday - Saturday
<%w%>	Numeric day of the week	1 - 7
<%y%>	Numeric day of the year	1 - 366
(week-patterns)
<%ww%>	Week of the year	1 - 53
(month-patterns)
<%m%>	Month of the year using one or two numeric digits, as needed	1 - 12
<%mm%>	Month of the year using exactly two numeric digits	01 - 12
<%mr%>	Month of the year using Roman numerals, as needed	I - XII
<%m1%>	Month using its first letter	J - D
<%loc_m1%>	Month as a single-letter abbreviation based on the current user settings	J - D
<%m2%>	Month using its first two letters	Ja - De
<%loc_m2%>	Month as a two-letter abbreviation based on the current user settings	Ja - De
<%m3%>	Month using its first three letters	Jan - Dec
<%mmm%>	Month using its first three letters	Jan - Dec
<%loc_m3%>	Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>	Jan - Dec
<%loc_mmm%>	Month as a three-letter abbreviation based on the current user regional and language settings	Jan - Dec
<%mmmm%>	Full name of the month	January - December
<%loc_mmmm%>	Full month name based on the current user regional and language settings	January - December
(year-patterns)
<%q%>	Date shown as the quarter of the year	1 - 4
<%hy%>	Date shown as the half of the year	1 - 2
<%loc_y%>	Year represented by the last digit only, based on the current regional settings	0 - 9
<%yy%>	Last two digits of the year	01 - 99
<%loc_yy%>	Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years	01 - 99
<%yyyy%>	Full year using four digits	0100 - 9999
<%loc_yyyy%>	Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied	0100 - 9999
<%i%>	Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC	1767085565940
(localized era-patterns)
<%loc_g%>	Period/era based on the current user regional and language settings	A,B
<%loc_gg%>	Period/era based on the current user regional and language settings	AD,BC
(localized date-patterns)
<%loc_sdate%>	Date in short format based on the current user regional and language settings	12/31/2000
<%loc_ldate%>	Date in long format based on the current user regional and language settings	December 31, 2000
<%loc_dsep%>	Date separator based on the current user regional and language settings	/
(time-patterns)
<%h%>	Hour in one or two digits, as needed	0 - 23
<%hh%>	Hour in two digits	00 - 23
<%h12%>	Hour in 12-hour format, in one or two digits	0/12 - 11
<%hh12%>	Hour in 12-hour format, in two digits	00/12 - 11
<%n%>	Minute in one or two digits, as needed	0 - 59
<%nn%>	Minute in two digits	00 - 59
<%s%>	Second in one or two digits, as needed	0 - 59
<%ss%>	Second in two digits	00 - 59
<%AM/PM%>	12-hour clock with uppercase "AM" or "PM" as appropriate	AM, PM
(localized time-patterns)
<%loc_AM/PM%>	Time marker such as AM or PM based on the current user regional and language settings	AM, PM
<%loc_A/P%>	Single-character time marker such as A or P based on the current user regional and language settings	A, P
<%loc_time%>	Time based on the current user regional and language settings	1:30:15 PM
<%loc_time24%>	Time in 24-hour format without a time marker based on the current user regional and language settings	13:30:15
<%loc_tsep%>	Time separator based on the current user regional and language settings	:

null {null}, no date-ticker(s) is shown while a bar is created, moved or resized
"<%loc_sdate%>" {string} displays the bar's margins in short format
"<c><b><%mmm%> <%d%></b><br><c><%hh%>:<%nn%>" {string}, displays the month and day on the first line, while the second shows the hour and minute
"<%=shortdate(value=end?value-1:value)%>" {string}, displays the end-margin with one day before (@since 2.3)
"<%mmm%> <%d%><fgcolor 808080><%=value=end?` (`+(end - start) + `)`:``%>" {string}, displays the month, the day and for the end-margin includes the number of days of the bar being created, resized or moved (@since 2.3)
"<%=value=start?``:value%>" {string}, specifies that only end-margin of the bar is being shown (@since 2.3)

The DateTickerLabelHMargin property gets or sets the distance between the date-label and the bar, while create, resize or move it. The distance is specified in pixels. The minimum distance is 0 pixels. The default distance is 4 pixels. The DateTickerLabelVAlign property gets or sets the vertical alignment of the date label, while create, resize or move the bar. The DateTickerLabel property gets or sets the format to display the bar's start and end margins while creating, moving or resizing it. The DrawDateTicker property specifies whether the chart supports date-ticker (the chart's date-ticker is visible only if the mouse pointer hovers the chart area).

null {null}, the distance between the date-label and the bar is 4 pixels (default)
0 {number}, the distance between the date-label and the bar is 0 pixels

The DateTickerLabelVAlign property gets or sets the vertical alignment of the date label, while create, resize or move the bar. The default value is 0 which indicates that the date-label is displayed on top, right-below the header. The DrawDateTicker property specifies whether the chart supports date-ticker (the chart's date-ticker is visible only if the mouse pointer hovers the chart area). The DateTickerLabelHMargin property gets or sets the distance between the date-label and the bar, while create, resize or move it.

The DateTickerLabelVAlign property supports one of the following:

• 0 {number}, indicates that the date-label is displayed on top, right-below the header (default)
• 1 {number}, specifies that the start/end margins of the bar are displayed to left/side of it

null {null}, the date-label is displayed on top, right-below the header (default)
1 {number}, the start/end margins of the bar are displayed to left/side of it

The DrawDateTicker property specifies whether the chart supports date-ticker (the chart's date-ticker is visible only if the mouse pointer hovers the chart area). The DateTickerLabel property gets or sets the format to display the bar's start and end margins while creating, moving or resizing it. The DateTickerLabelVAlign property gets or sets the vertical alignment of the date label, while create, resize or move the bar. The DateTickerLabelHMargin property gets or sets the distance between the date-label and the bar, while create, resize or move it. By default, the DrawDateTicker property is set to false, meaning that no date-ticker is shown.

true {boolean}, shows the chart's ticker that's visible only when the mouse pointer hovers the date-time
false {boolean}, no date-ticker is shown while the mouse pointer hovers the chart area

The DrawGridLines property shows or hides the chart's grid lines. The GridLines property customizes the color, width and style of the control's grid-lines. If the DrawGridLines property is null, the chart inherits the control's grid-lines visibility, as specified by the Gantt.DrawGridLines property. If the DrawGridLines property is set to a numeric value, it determines whether the chart's grid-lines are visible or hidden. The DrawLevelSeparator property shows or hides lines between chart's levels (header). By default, the chart's grid-lines are hidden. The Level.DrawTickLines property shows or hides the tick lines for the current level (the tick lines are shown in the header section only). The Level.DrawGridLines property shows or hides the grid lines for the current level (the grid lines are shown in the items section only).

The DrawGridLines property of exontrol.Gantt.Chart type supports the following flags:

• exNoLines(0), no grid lines
• exAllLines(-1), shows all vertical and horizontal grid lines
• exRowLines(-2), shows grid lines for existing rows only
• exHLines(1), shows only the horizontal grid lines
• exVLines(2), shows only the vertical grid lines

null {null}, inherits the control's drawGridLines property
0 or exontrol.Tree.GridLinesEnum.exNoLines {number}, hides the grid-lines (default)
-1 or exontrol.Tree.GridLinesEnum.exAllLines {number}, shows all vertical and horizontal grid lines

The DrawLevelSeparator property shows or hides lines between chart's levels (header). The DrawGridLines property shows or hides the chart's grid lines. The Level.DrawTickLines property shows or hides the tick lines for the current level (the tick lines are shown in the header section only). The Level.DrawGridLines property shows or hides the grid lines for the current level (the grid lines are shown in the items section only). By default, the DrawLevelSeparator property is exLevelDefaultLine (-1), which indicates that the default grid line style is applied to the lines between chart's levels.

The DrawLevelSeparator property supports the following values and flags:

• exLevelNoLine(0), no line is shown
• exLevelDefaultLine(-1), indicates the default grid line style
• exLevelDotLine(1), indicates a dotted line. For vertical/tick lines, it can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine. Can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine option.
• exLevelSolidLine(2), indicates a solid line. For vertical/tick lines, it can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine. Can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine option.
• exLevelLowerHalf(0x10), (no effect) indicates that the line is shown in the lower half of the level. For vertical/tick lines, it can be combined with exLevelDotLine or exLevelSolidLine
• exLevelUpperHalf(0x20), (no effect) indicates that the line is shown in the upper half of the level. For vertical/tick lines, it can be combined with exLevelDotLine or exLevelSolidLine
• exLevelMiddleLine(0x40), (no effect) indicates that the line is shown in the middle. For vertical/tick lines, it can be combined with exLevelDotLine or exLevelSolidLine
• exLevelQuarterHeight(0x100), (no effect) indicates that the line is shown as a quarter of the full height. Specify the exLevelQuarterHeight option to show shorter tick lines in the chart's level. Can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine option

By default, the DrawLevelSeparator property is set to exontrol.Gantt.LevelLineEnum.exLevelDefaultLine.

0 or exontrol.Gantt.LevelLineEnum.exLevelNoLine {number}, hides the lines between chart's levels
2 or exontrol.Gantt.LevelLineEnum.exLevelSolidLine {number}, shows solid lines between chart's levels

The EndPrintDate property gets the maximum-date for the entire chart (upper date), as undefined (the chart includes no bars) or the maximum-date for the entire chart (upper date). The StartPrintDate property gets the minimum-date for the entire chart (lower date) as undefined (the chart includes no bars) or the minimum-date for the entire chart (lower date). The FirstVisibleDate property gets or sets the chart's first visible date. The LastVisibleDate property gets the chart's last visible date.

The following statements are equivalents:

 oGantt.Chart.GetEndPrintDate(), gets the maximum-date for the entire chart (upper date)
 oGantt.Chart.EndPrintDate, gets the maximum-date for the entire chart (upper date)

where oGantt is an object of Gantt type

The FirstVisibleDate property gets or sets the chart's first visible date. The FirstVisibleDate and FirstVisibleOffset properties are interrelated. Changing the first visible date resets the first visible offset. The FirstVisibleOffset property specifies the number of pixels from the chart's first visible date to the chart's left edge. Changing the first visible date resets the first visible offset. The FirstVisibleDate property can be one of the following types:

• value {string}, defines the date in string-format as "#MM/DD/YYYY[ HH:mm:ss]#"
• value {Date}, indicates a JavaScript date to be copied
• value {number} integer value representing the year of the date to be created
• value {null} or {undefined}, indicates the current date and time (equivalent of Now)

The StartPrintDate property gets the minimum-date for the entire chart (lower date) as undefined (the chart includes no bars) or the minimum-date for the entire chart (lower date). The EndPrintDate property gets the maximum-date for the entire chart (upper date), as undefined (the chart includes no bars) or the maximum-date for the entire chart (upper date). The ScrollTo() method scrolls the chart to ensure that specified date fits the chart's area.

The following statements are equivalents:

 oGantt.Chart.SetFirstVisibleDate("#03/15/2024#"), sets the chart's first visible date to March 15, 2024
 oGantt.Chart.FirstVisibleDate = "#03/15/2024#", sets the chart's first visible date to March 15, 2024

where oGantt is an object of Gantt type

The FirstVisibleOffset property gets or sets the chart's first visible offset. The offset is the number of pixels from the chart's first visible date to the chart's left edge. The FirstVisibleDate and FirstVisibleOffset properties are interrelated. Changing the first visible offset may change the first visible date.

The following statements are equivalents:

 oGantt.Chart.SetFirstVisibleOffset(8), sets the chart's first visible offset to 8-pixels
 oGantt.Chart.FirstVisibleOffset = 8, sets the chart's first visible offset to 8-pixels

where oGantt is an object of Gantt type

The HistogramHeight property shows or hides the control's histogram.

To display bars in the controls histogram, the following conditions must be met:

1. Each Bar must have its HistogramShape property set. By default, this property is null, so without setting it, the bar will not appear in the histogram
2. The control's HistogramVisible property must be enabled to make the histogram visible
3. The control's HistogramHeight property defines the vertical size of the histogram

Together, these settings ensure that the bars are correctly represented in the controls histogram.

In order to show cumulative values within the histogram, the control requires the following:

• a hierarchy must be displayed, for example by grouping items using a specific column (AllowGroupBy, SortBarVisible properties)
• the HistogramView property must include the exHistogramGroupCumulative and exHistogramNoGrouping flags

0 {number}, hides the control's histogram (use better the histogramVisible on 0)
36 {number}, defines the height of the control's histogram to 36-pixels tall

The HistogramUnitCount property gets or sets the time-scale count to determine the effort of bars with variable-effort (effort of expression/string type). The HistogramUnitScale property defines the time-scale unit to determine the effort of bars with variable-effort (effort of expression/string type). The HistogramUnitScale / HistogramUnitCount properties have effect only for item-bars with ItemBar.Effort property to refer an expression (defines an variable-effort). The value keyword indicates the date-time being queried, the start and end keywords specify the starting and ending points of the bar as indicated by Start and End properties of the ItemBar object. For instance, the ItemBar.Effort on "weekday(value) in (0,6) ? 0 : 2", means that that effort to do the job is 2 for any day in the task, excepts the Sundays(0) and Saturdays(6) (weekend. For instance, the "(hour(value) > 5 and hour(value) < 18) ? 2 : 0" indicates that the bar's effort is 2 for any hour between 6AM and 18PM, and 0 for rest. By default, the HistogramUnitCount property is equivalent with ResizeUnitCount property.

null {null}, the chart's resizeUnitCount defines the histogram's unit-count
2 {number}, sets the chart's histogram unit-count to 2

The HistogramUnitScale property gets or sets the time-scale unit to determine the effort of bars with variable-effort (effort of expression/string type). The HistogramUnitCount property defines the time-scale count to determine the effort of bars with variable-effort (effort of expression/string type). The HistogramUnitScale / HistogramUnitCount properties have effect only for item-bars with ItemBar.Effort property to refer an expression (defines an variable-effort). The value keyword indicates the date-time being queried, the start and end keywords specify the starting and ending points of the bar as indicated by Start and End properties of the ItemBar object. For instance, the ItemBar.Effort on "weekday(value) in (0,6) ? 0 : 2", means that that effort to do the job is 2 for any day in the task, excepts the Sundays(0) and Saturdays(6) (weekend. For instance, the "(hour(value) > 5 and hour(value) < 18) ? 2 : 0" indicates that the bar's effort is 2 for any hour between 6AM and 18PM, and 0 for rest. By default, the HistogramUnitScale property is equivalent with ResizeUnitScale property.

The HistogramUnitScale property as a value of exontrol.UnitEnum type, supports the following values:

• exYear (0), indicates the year scale
• exHalfYear (1), indicates the half-year scale
• exQuarterYear (2), indicates the quarter-year scale
• exMonth (0x10), indicates the month scale
• exThirdMonth (0x11), indicates the third-month scale
• exWeek (0x100), indicates the week scale
• exDay (0x1000), indicates the day scale
• exHour (0x10000), indicates the hour scale
• exMinute (0x100000), indicates the minute scale
• exSecond (0x1000000), indicates the second scale

null {null}, the chart's resizeUnitScale defines the histogram's unit-scale
0x10000 or exontrol.UnitEnum.exHour {number}, sets the chart's histogram unit-scale to hours

The HistogramView property gets or sets the items the control's histogram displays data for.

To display bars in the controls histogram, the following conditions must be met:

1. Each Bar must have its HistogramShape property set. By default, this property is null, so without setting it, the bar will not appear in the histogram
2. The control's HistogramVisible property must be enabled to make the histogram visible
3. The control's HistogramHeight property defines the vertical size of the histogram

Together, these settings ensure that the bars are correctly represented in the controls histogram.

In order to show cumulative values within the histogram, the control requires the following:

• a hierarchy must be displayed, for example by grouping items using a specific column (AllowGroupBy, SortBarVisible properties)
• the HistogramView property must include the exHistogramGroupCumulative and exHistogramNoGrouping flags

The Gantt.HistogramViewEnum type supports the following values and flags:

• exHistogramVisibleItems(1), the histogram is shown for the visible items only
• exHistogramSelectedItems(2), the histogram is shown for the selected items only
• exHistogramCheckedItems(4), the histogram is shown for the checked items only
• exHistogramSelectedBars(8), the histogram is shown for the selected bars only
• exHistogramUnlockedItems(0x10), the histogram is shown only for unlocked items
• exHistogramLockedTopItems(0x20), the histogram is shown only for locked items in the top side of the control
• exHistogramLockedBottomItems(0x40), The histogram is shown only for locked items in the bottom side of the control
• exHistogramAllItems(0x70), The histogram is shown for all items
• exHistogramFilteredItems(0x80), The histogram is shown for the filtered items only
• exHistogramLeafItems(0x100), The histogram shows the bars for leaf items (a leaf item contains no child items)
• exHistogramRecLeafItems(0x200), The histogram shows all bars for all recursive leaf items (a leaf item contains no child items)
• exHistogramNoGrouping(0x400), The histogram shows all bars without grouping based on the item's parent
• exHistogramBackground(0x800), The histogram's chart goes on the background, while the non-working part is shown on front ( erases the non-working parts )
• exHistogramNoGroupCaption(0x1000), The histogram shows no caption for groups being shown
• exHistogramGroupCumulative(0x2000), The histogram shows cumulative groups

9232 or exontrol.Gantt.HistogramViewEnum.exHistogramGroupCumulative | exontrol.Gantt.HistogramViewEnum.exHistogramUnlockedItems | exontrol.Gantt.HistogramViewEnum.exHistogramNoGrouping {number}, shows the histogram using cumulative-colors, without grouping the items by parents
1152 or exontrol.Gantt.HistogramViewEnum.exHistogramFilteredItems | exontrol.Gantt.HistogramViewEnum.exHistogramNoGrouping {number}, shows the histogram for the visible items only (filtered items)
1040 or exontrol.Gantt.HistogramViewEnum.exHistogramUnlockedItems | exontrol.Gantt.HistogramViewEnum.exHistogramNoGrouping {number}, shows the histogram for all items

The HistogramVisible property shows or hides the control's histogram.

To display bars in the controls histogram, the following conditions must be met:

1. Each Bar must have its HistogramShape property set. By default, this property is null, so without setting it, the bar will not appear in the histogram
2. The control's HistogramVisible property must be enabled to make the histogram visible
3. The control's HistogramHeight property defines the vertical size of the histogram

Together, these settings ensure that the bars are correctly represented in the controls histogram.

In order to show cumulative values within the histogram, the control requires the following:

• a hierarchy must be displayed, for example by grouping items using a specific column (AllowGroupBy, SortBarVisible properties)
• the HistogramView property must include the exHistogramGroupCumulative and exHistogramNoGrouping flags

false {boolean}, the control's histogram is hidden
true {boolean}, the control shows the historam

The HistogramZOrder property gets or sets the z-order of the bars to be shown within the chart's histogram. The HistogramZOrder property contains a comma-separated list of bar-names/types, defining the z-order of bars when they display together within the chart's histogram. The Bar.Name of the bar defines its type.

By default, the control defines the following bar-names/types:

• "Task"
• "Split"
• "Progress"
• "Milestone"
• "Summary"
• "Project Summary"
• "Deadline"

You can also defines new bar types using the Bars.Add method, by specifying the name parameter.

"" {string} or null {null}, no z-order is specified
"Task-A,Task" {number}, specifies that the "Task-A" bar is on top of "Task" when they display together within the chart's histogram

The Labels property gets or sets the predefined format to display the level's label of each time-unit. The Chart.SetLabel(unit,value) method sets the predefined format of the level's label for specified unit. The chart's header is organized into multiple levels, each capable of displaying its own time scale. Each level shows date-time values according to the Chart.Labels property. Since Chart.Labels provides a list of alternative captions, the control automatically selects the most appropriate one based on the available width of the time unit. The Level() method retrieves the level based on its index, the Level.Unit property retrieves the time-unit of the level as a value of exontrol.UnitEnum type, and the Level.Label property gets or sets the predefined format of the level's label. The label can contain multiple alternative HTML labels, separated by <|>, and can include values for Level.Count and Level.Unit, separated by <||>, as described in the Level.Label property.

The Labels property of ChartLabelType type supports the following fields:

year {string}, specifies the predefined format of the level when it displays years
halfYear {string}, specifies the predefined format of the level when it displays half of years
quarterYear {string}, specifies the predefined format of the level when it displays quarter of years
month {string}, specifies the predefined format of the level when it displays months
thirdMonth {string}, specifies the predefined format of the level when it displays third of months
week {string}, specifies the predefined format of the level when it displays weeks
day {string}, specifies the predefined format of the level when it displays days
hour {string}, specifies the predefined format of the level when it displays hours
minute {string}, specifies the predefined format of the level when it displays minutes
second {string}, specifies the predefined format of the level when it displays seconds

The following example sets custom labels for year, month, week and day time-units:

 {
   year: "<%yy%><|>'<%yy%><|><%yyyy%>",
   month: "<|><%m1%><|><%m2%><|><%m3%><|><%mmmm%><|><%m3%> '<%yy%><|><%mmmm%> <%yyyy%>",
   week: "<|><%ww%><|><%ww%> <off -4><%m3%> <%d%>, '<%yy%><|><%ww%> <off -4><%mmmm%> <%d%>, <%yyyy%><||><||>256",
   day: "<|><%d%><|><%d%> <off -4><%d1%><|><%d%> <off -4><%d2%><||><||>4096",
 }

The following statements are equivalents:

 oGantt.Chart.SetLabels({...}), sets the predefined format to display the level's label of each time-unit
 oGantt.Chart.Options.labels = {...}, sets the predefined format to display the level's label of each time-unit

where oGantt is an object of Gantt type

The LastVisibleDate property gets the chart's last visible date. The FirstVisibleDate property gets or sets the chart's first visible date. The StartPrintDate property gets the minimum-date for the entire chart (lower date) as undefined (the chart includes no bars) or the minimum-date for the entire chart (lower date). The EndPrintDate property gets the maximum-date for the entire chart (upper date), as undefined (the chart includes no bars) or the maximum-date for the entire chart (upper date).

The following statements are equivalents:

 oGantt.Chart.GetLastVisibleDate(), gets the chart's last visible date
 oGantt.Chart.LastVisibleDate, gets the chart's last visible date

where oGantt is an object of Gantt type

The LevelCount property gets or sets the number of levels the chart's header displays. The chart supports one or more levels within its header. Use the Level(index) method to access each level. By default, the chart displays two levels within its header. The LevelCount property uses the GetLevelCount() and SetLevelCount() methods to get or set the count of levels the chart's header displays.

1 {number}, defines a single-level header
2 {number}, specifies that the chart's header displays 2-levels

The Link property gets or sets the appearance of the link between bars. The Add method of Links object adds a new link between two bars, using the current link appearance defined by Link property. The Gantt.Link() method gets the link giving its index, identifier/key or reference. The Link.Link property specifies the appearance of a specific link between two bars. The Link property specifies the appearance of the link between bars, as an object of {type, dir, width, color, arrow, style, startPos, endPos} type, where:

• type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
• dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
• width {number}, specifies the link's width or size (1 by default)
• color {string}, indicates the link's color (partial-black by default)
• arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
• arrowSize {number}, indicates the arrow's size. If it is missing or not specified the arrow's size is defined by link's width (1 by default) (since 2.2)
• arrowShape {object}, defines an object of exontrol.Def.Shape type to customize the shape of the link's arrow (for instance shows the link's arrow as a circle instead of a triangle) (since 2.2)
• style {array}, specifies the link's dash pattern to show the lines (solid by default)
• startPos {any}, indicates the list of corners of in-element, the link can start from
• endPos {any}, indicates the list of corners of out-element, the link can end to

By default, the Link property is { type: 0, color: "black", startPos: "MR", endPos: "TL,ML,BL"}, meaning that the links are rectangular, shown in black color, starting from the middle-right corner of the source bar and ending to the top-left, middle-left or bottom-left corners of the target bar.

The following sample defines "straight" links shown in gray:
{
   type: 2,
   color: "gray"
}

The LinkEndTo property gets or sets the appearance of the link that ends to any selected-bar (incoming links). The Add method of Links object adds a new link between two bars, using the current link appearance defined by Link property. The Link property gets or sets the appearance of the link between bars. The Gantt.Link() method gets the link giving its index, identifier/key or reference. The Link.Link property specifies the appearance of a specific link between two bars. The LinkStartFrom property gets or sets the appearance of the link that starts from any selected-bar (outgoing links). The LinkUnselected property gets or sets the appearance of the link not related to any selected-bar (unselected links).

The LinkEndTo property specifies the appearance of the link that ends to any selected-bar (incoming links), as an object of {type, dir, width, color, arrow, style, startPos, endPos} type, where:

• type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
• dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
• width {number}, specifies the link's width or size (1 by default)
• color {string}, indicates the link's color (partial-black by default)
• arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
• arrowSize {number}, indicates the arrow's size. If it is missing or not specified the arrow's size is defined by link's width (1 by default) (since 2.2)
• arrowShape {object}, defines an object of exontrol.Def.Shape type to customize the shape of the link's arrow (for instance shows the link's arrow as a circle instead of a triangle) (since 2.2)
• style {array}, specifies the link's dash pattern to show the lines (solid by default)
• startPos {any}, indicates the list of corners of in-element, the link can start from
• endPos {any}, indicates the list of corners of out-element, the link can end to

The following sample defines "direct" links shown in blue:
{
   type: 1,
   color: "blue"
}

The LinkStartFrom property gets or sets the appearance of the link that starts from any selected-bar (outgoing links). The Add method of Links object adds a new link between two bars, using the current link appearance defined by Link property. The Link property gets or sets the appearance of the link between bars. The Gantt.Link() method gets the link giving its index, identifier/key or reference. The Link.Link property specifies the appearance of a specific link between two bars. The LinkEndTo property gets or sets the appearance of the link that ends to any selected-bar (incoming links). The LinkUnselected property gets or sets the appearance of the link not related to any selected-bar (unselected links).

The LinkStartFrom property defines the appearance of the link that starts from any selected-bar (outgoing links), as an object of {type, dir, width, color, arrow, style, startPos, endPos} type, where:

• type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
• dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
• width {number}, specifies the link's width or size (1 by default)
• color {string}, indicates the link's color (partial-black by default)
• arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
• arrowSize {number}, indicates the arrow's size. If it is missing or not specified the arrow's size is defined by link's width (1 by default) (since 2.2)
• arrowShape {object}, defines an object of exontrol.Def.Shape type to customize the shape of the link's arrow (for instance shows the link's arrow as a circle instead of a triangle) (since 2.2)
• style {array}, specifies the link's dash pattern to show the lines (solid by default)
• startPos {any}, indicates the list of corners of in-element, the link can start from
• endPos {any}, indicates the list of corners of out-element, the link can end to

The following sample defines "round" links shown in red:
{
   type: 3,
   color: "red"
}

The LinkUnselected property gets or sets the appearance of the link not related to any selected-bar (unselected links). The Add method of Links object adds a new link between two bars, using the current link appearance defined by Link property. The Link property gets or sets the appearance of the link between bars. The Gantt.Link() method gets the link giving its index, identifier/key or reference. The Link.Link property specifies the appearance of a specific link between two bars. The LinkStartFrom property gets or sets the appearance of the link that starts from any selected-bar (outgoing links). The LinkEndTo property gets or sets the appearance of the link that ends to any selected-bar (incoming links).

The LinkUnselected property defines the appearance of the link not related to any selected-bar (unselected links), as an object of {type, dir, width, color, arrow, style, startPos, endPos} type, where:

• type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
• dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
• width {number}, specifies the link's width or size (1 by default)
• color {string}, indicates the link's color (partial-black by default)
• arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
• arrowSize {number}, indicates the arrow's size. If it is missing or not specified the arrow's size is defined by link's width (1 by default) (since 2.2)
• arrowShape {object}, defines an object of exontrol.Def.Shape type to customize the shape of the link's arrow (for instance shows the link's arrow as a circle instead of a triangle) (since 2.2)
• style {array}, specifies the link's dash pattern to show the lines (solid by default)
• startPos {any}, indicates the list of corners of in-element, the link can start from
• endPos {any}, indicates the list of corners of out-element, the link can end to

The following sample defines "rectangular" links of 2-pixels width with no direction:
{
   type: 0,
   width: 2,
   dir: 0
}

The Links property gets the control's links. A link is a connection between two item-bars. The GetLinks() method gets the control's links. The Add, Clear, Remove, and other methods of the Links object allow you to manage the links between item-bars. The Gantt.Link property gets the link giving its index, identifier/key or reference. The Chart.Link property gets or sets the appearance of the link between bars.

The following statements are equivalents:

 oGantt.Chart.GetLinks().Count, counts the links within the control
 oGantt.Chart.Links.Count, counts the links within the control

where oGantt is an object of Gantt type

The Locale property specifies the language to format the control. The locale is used to format dates. The locale string must be a valid BCP 47 language tag. If the locale is null, the browser's UI language is used. The locale determines how date and time units are displayed. For example, when the locale is set to "de" (German), month names appear as "Januar", "Februar", etc., whereas with the "en-US" (U.S. English) locale, they are displayed as "January", "February", and so on. The NonworkingDays property gets or sets the chart's non-working days. By default, the Locale property is null, which indicates that the browser's UI language is used.

null {null}, indicates that the browser's UI language is used.
"de" {string}, defines German locale
"de-DE" {string}, defines Germany German locale
"en-US" {string}, defines U.S. English locale
"es" {string}, defines Spanish locale
"fr" {string}, defines French locale

The MaxUnitWidth property gets or sets the maximum width of the units within the base-level, while the user resizes or zooms-in/out the chart. The UnitWidth property is clamped between MinUnitWidth and MaxUnitWidth properties. The MinUnitWidth and MaxUnitWidth properties define the range within which the UnitWidth can vary when the AllowActions property includes the "chart-resize" or "chart-zoom" actions. For instance, when "chart-zoom" is enabled, the MinUnitWidth sets the threshold at which the chart switches to a smaller unit scale as the UnitWidth approaches it. By default, the MaxUnitWidth property is set to 36-pixels.

36 {number}, specifies that maximum width to display the units in base-level, is 36-pixels wide

The MinUnitWidth property gets or sets the minimum width of the units within the base-level, while the user resizes or zooms-in/out the chart. The UnitWidth property is clamped between MinUnitWidth and MaxUnitWidth properties. The MinUnitWidth and MaxUnitWidth properties define the range within which the UnitWidth can vary when the AllowActions property includes the "chart-resize" or "chart-zoom" actions. For instance, when "chart-zoom" is enabled, the MinUnitWidth sets the threshold at which the chart switches to a smaller unit scale as the UnitWidth approaches it. By default, the MinUnitWidth property is set to 12-pixels.

12 {number}, specifies that minimum width to display the units in base-level, is 12-pixels wide

The NonworkingDays property gets or sets the chart's non-working days. The non-working days are days of the week when no work is performed. The ShowNonworkingDays property specifies whether the chart highlights the non-working days. The ShowNonworkingUnits property shows or hides the non-working units in base-level. The NonworkingDays property is specified as a combination of one or more of the following flags:

• 0b00000001 (1) {number}, specifies that each Sunday is a non-working day
• 0b00000010 (2) {number}, specifies that each Monday is a non-working day
• 0b00000100 (4) {number}, specifies that each Tuesday is a non-working day
• 0b00001000 (8) {number}, specifies that each Wednesday is a non-working day
• 0b00010000 (16) {number}, specifies that each Thursday is a non-working day
• 0b00100000 (32) {number}, specifies that each Friday is a non-working day
• 0b01000000 (64) {number}, specifies that each Saturday is a non-working day

The "nw" entry of the Shapes property defines the visual appearance used to display non-working units. By default, the NonworkingDays property is null, meaning that non-working days are considered to be the weekend days defined by the chart's locale (typically Saturday and Sunday).

null {null}, the non-working days are weekend days, as defined by the chart's locale property (Saturday and Sunday are the weekend)
0 {number}, all days of the week are working (no non-working days)
0b01000001 or 65 {number}, every Sunday and Saturday is a non-working day (IE does not support binary representation)

The NonworkingHours property gets or sets the chart's non-working hours. The non-working hours are hours of the day when no work is performed. The ShowNonworkingHours property specifies whether the chart highlights the non-working hours. The ShowNonworkingHours property marks the non-working hours within each day, while the ShowNonworkingUnits property shows or hides the non-working units in base-level. The NonworkingHours property indicates a number that represents the non-working of the day as a combination of one or more of the following flags:

• 0b00000000000000000000000000000001 (1) {number}, indicates that the hour after 12PM is a non-working hour
• 0b00000000000000000000000000000010 (2) {number}, indicates that the hour after 1AM is a non-working hour
• 0b00000000000000000000000000000100 (4) {number}, indicates that the hour after 2AM is a non-working hour
• 0b00000000000000000000000000001000 (8) {number}, indicates that the hour after 3AM is a non-working hour
• 0b00000000000000000000000000010000 (16) {number}, indicates that the hour after 4AM is a non-working hour
• 0b00000000000000000000000000100000 (32) {number}, indicates that the hour after 5AM is a non-working hour
• 0b00000000000000000000000001000000 (64) {number}, indicates that the hour after 6AM is a non-working hour
• 0b00000000000000000000000010000000 (128) {number}, indicates that the hour after 7AM is a non-working hour
• 0b00000000000000000000000100000000 (256) {number}, indicates that the hour after 8AM is a non-working hour
• 0b00000000000000000000001000000000 (512) {number}, indicates that the hour after 9AM is a non-working hour
• 0b00000000000000000000010000000000 (1024) {number}, indicates that the hour after 10AM is a non-working hour
• 0b00000000000000000000100000000000 (2048) {number}, indicates that the hour after 11AM is a non-working hour
• 0b00000000000000000001000000000000 (4096) {number}, indicates that the hour after 12AM is a non-working hour
• 0b00000000000000000010000000000000 (8192) {number}, indicates that the hour after 1PM is a non-working hour
• 0b00000000000000000100000000000000 (16384) {number}, indicates that the hour after 2PM is a non-working hour
• 0b00000000000000001000000000000000 (32768) {number}, indicates that the hour after 3PM is a non-working hour
• 0b00000000000000010000000000000000 (65536) {number}, indicates that the hour after 4PM is a non-working hour
• 0b00000000000000100000000000000000 (131072) {number}, indicates that the hour after 5PM is a non-working hour
• 0b00000000000001000000000000000000 (262144) {number}, indicates that the hour after 6PM is a non-working hour
• 0b00000000000010000000000000000000 (524288) {number}, indicates that the hour after 7PM is a non-working hour
• 0b00000000000100000000000000000000 (1048576) {number}, indicates that the hour after 8PM is a non-working hour
• 0b00000000001000000000000000000000 (2097152) {number}, indicates that the hour after 9PM is a non-working hour
• 0b00000000010000000000000000000000 (4194304) {number}, indicates that the hour after 10PM is a non-working hour
• 0b00000000100000000000000000000000 (8388608) {number}, indicates that the hour after 11PM is a non-working hour

The "nw" entry of the Shapes property defines the visual appearance used to display non-working units. By default, all hours are working hours (no non-working hours).

0 or null {number}, all hours of the week are working (no non-working hours)
0b00000000111110000000000011111111 or 16253183 {number}, specifies that hours 8AM to 7PM are working hours (IE does not support binary representation)

The Options property applies new options to the control's chart. Each option of ChartOptions type has associated a property of the Chart object. For instance, the option:

levelCount {number}, specifies the number of levels in the chart's header

is associated with the property:

LevelCount {number}, specifies the number of levels in the chart's header

The Options property can be used to set or get multiple options of the control's chart at once, instead of changing each option separately. The getter of the Options property returns the options of the control's chart as an object of ChartOptions type. The setter of the Options property applies new options to the control's chart

The following statements are equivalents:

 oGantt.Chart.SetOptions({...}), sets multiple options of the control's chart at once
 oGantt.Chart.Options = {...}, sets multiple options of the control's chart at once

where oGantt is an object of Gantt type

The OverlaidOnMoving property specifies whether the overlaid bars are re-arranged while the user moves or resizes at runtime a bar. The OverlaidOnMoving property improves the visibility of overlaid bars when the user moves or resizes at runtime a bar. When enabled (true), the control automatically re-arranges the overlaid bars to avoid hiding them behind other bars during move or resize operations. When disabled (false), the overlaid bars maintain their original positions, which may result in some bars being hidden behind others during these operations. The Bar.OverlaidType property specifies how bars of specified type are arranged. By default, the OverlaidOnMoving property is set to false.

false {boolean} or null {null}, the overlaid-bars are not re-arranged while user resizes or moves the item-bars
true {boolean}, the overlaid-bars are re-arranged while user resizes or moves the item-bars

The OverviewHeight property shows or hides the control's overview. The overview section shows the entire range of the chart's date-time scale, and a rectangle that indicates the currently visible date-time range in the chart. The height of the overview is specified in pixels. The overview height can be set to zero (0) to hide the overview part of the control, but it is better to use the OverviewVisible property to hide or show the overview part of the control. By default, the overview height is 36-pixels tall.

0 {number}, hides the control's overview (use better the overviewVisible on 0)
64 {number}, defines the height of the control's overview to 64-pixels tall

The OverviewMarginsFormat property specifies the format used to display margin dates in the overview section of the control, applicable when using the exOverviewShowSelMargins or exOverviewShowMargins options of the OverviewVisible property. By default, the OverviewMarginsFormat field is empty, which means margin dates are displayed according to the chart's locale option, or the system's regional settings if no locale is specified.

The OverviewMarginsFormat property supports the following keywords:

• value {Date}, specifies the date-time to display
• margin {number}, defines the position of the margin date to display: 0 for the left margin of the whole chart, 1 for the right margin of the whole chart, and 2 or 3 for the left or right margins of the current view

It supports predefined constants and functions as described here. Additionally, the OverviewMarginsFormat property supports exHTML formatting, which allows applying different font styles to the displayed dates.

"value format `MM/dd`" {string}, specifies that the margin dates displayed in the overview section of the control use two digits for the month and two digits for the day, instead of using the regional settings
"(margin < 2 ? `<fgcolor gray>` : `<b>`) + shortdate(value)" {string}, displays the left and right margins of the whole chart in gray, while showing the left and right margins of the current view in bold

The OverviewShowSelectDates property shows or hides the selected-date(s) on the control's overview. The selected dates are indicated by vertical lines(sections) on the chart's overview. The AllowSelectDate property specifies whether the user can select one or more dates on the chart. The SelectDates property gets or sets the selected-dates. By default, the selected dates are not shown on the control's overview.

false {boolean}, the selected-date(s) are not visible on the control's overview
true {boolean}, shows the selected-date(s) on the control's overview

The OverviewToolTip property gets or sets the format of the tooltip being shown while the cursor hovers the chart's overview area. The overview tooltip is shown when the user hovers the mouse cursor over the overview part of the control, and it is hidden when the mouse cursor leaves the overview area. The OverviewVisible property shows or hides the control's overview. The OverviewHeight property shows or hides the control's overview. By default, the overview tooltip is shown using the same format as the chart's tooltip, but you can specify a different format for the overview tooltip using the OverviewToolTip property.

The format supports ex-HTML tags such as (<b>, <i>, <fgcolor>, ...) and <%DATE%> tags as follows:

Name	Description	Sample
(day-patterns)
<%d%>	Day of the month using one or two numeric digits, depending on the value	1 - 31
<%dd%>	Day of the month using exactly two numeric digits	01 - 31
<%d1%>	Weekday using its first letter	S - S
<%loc_d1%>	Weekday as a single-letter abbreviation based on the current user settings	S - S
<%d2%>	Weekday using its first two letters	Su - Sa
<%loc_d2%>	Weekday as a two-letter abbreviation based on the current user settings	Su - Sa
<%d3%>	Weekday using its first three letters	Sun - Sat
<%ddd%>	Weekday using its first three letters	Sun - Sat
<%loc_d3%>	Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>	Sun - Sat
<%loc_ddd%>	Weekday as a three-letter abbreviation based on the current user regional and language settings	Sun - Sat
<%dddd%>	Full name of the weekday	Sunday - Saturday
<%loc_dddd%>	Full weekday name based on the current user regional and language settings	Sunday - Saturday
<%w%>	Numeric day of the week	1 - 7
<%y%>	Numeric day of the year	1 - 366
(week-patterns)
<%ww%>	Week of the year	1 - 53
(month-patterns)
<%m%>	Month of the year using one or two numeric digits, as needed	1 - 12
<%mm%>	Month of the year using exactly two numeric digits	01 - 12
<%mr%>	Month of the year using Roman numerals, as needed	I - XII
<%m1%>	Month using its first letter	J - D
<%loc_m1%>	Month as a single-letter abbreviation based on the current user settings	J - D
<%m2%>	Month using its first two letters	Ja - De
<%loc_m2%>	Month as a two-letter abbreviation based on the current user settings	Ja - De
<%m3%>	Month using its first three letters	Jan - Dec
<%mmm%>	Month using its first three letters	Jan - Dec
<%loc_m3%>	Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>	Jan - Dec
<%loc_mmm%>	Month as a three-letter abbreviation based on the current user regional and language settings	Jan - Dec
<%mmmm%>	Full name of the month	January - December
<%loc_mmmm%>	Full month name based on the current user regional and language settings	January - December
(year-patterns)
<%q%>	Date shown as the quarter of the year	1 - 4
<%hy%>	Date shown as the half of the year	1 - 2
<%loc_y%>	Year represented by the last digit only, based on the current regional settings	0 - 9
<%yy%>	Last two digits of the year	01 - 99
<%loc_yy%>	Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years	01 - 99
<%yyyy%>	Full year using four digits	0100 - 9999
<%loc_yyyy%>	Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied	0100 - 9999
<%i%>	Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC	1767085565940
(localized era-patterns)
<%loc_g%>	Period/era based on the current user regional and language settings	A,B
<%loc_gg%>	Period/era based on the current user regional and language settings	AD,BC
(localized date-patterns)
<%loc_sdate%>	Date in short format based on the current user regional and language settings	12/31/2000
<%loc_ldate%>	Date in long format based on the current user regional and language settings	December 31, 2000
<%loc_dsep%>	Date separator based on the current user regional and language settings	/
(time-patterns)
<%h%>	Hour in one or two digits, as needed	0 - 23
<%hh%>	Hour in two digits	00 - 23
<%h12%>	Hour in 12-hour format, in one or two digits	0/12 - 11
<%hh12%>	Hour in 12-hour format, in two digits	00/12 - 11
<%n%>	Minute in one or two digits, as needed	0 - 59
<%nn%>	Minute in two digits	00 - 59
<%s%>	Second in one or two digits, as needed	0 - 59
<%ss%>	Second in two digits	00 - 59
<%AM/PM%>	12-hour clock with uppercase "AM" or "PM" as appropriate	AM, PM
(localized time-patterns)
<%loc_AM/PM%>	Time marker such as AM or PM based on the current user regional and language settings	AM, PM
<%loc_A/P%>	Single-character time marker such as A or P based on the current user regional and language settings	A, P
<%loc_time%>	Time based on the current user regional and language settings	1:30:15 PM
<%loc_time24%>	Time in 24-hour format without a time marker based on the current user regional and language settings	13:30:15
<%loc_tsep%>	Time separator based on the current user regional and language settings	:

"" {string}, displays no tooltip
"<%ddd%> <%m%>/<%d%>/<%yyyy%>" {string}, displays the date from the overview as "Sun 12/2/2007"

The OverviewVisible property shows or hides the control's overview. The overview part of the Gantt chart displays a miniature version of the chart's bars, allowing the user to quickly scroll to a specific time-zone or date-time range. The overview part can be shown or hidden, and it can display the bars for all items or just for the visible items. You can also include the time-scale in the overview part, and you can allow the user to vertically scroll the chart while navigating up or down the overview part of the control. By default, the overview part is hidden. The OverviewVisible property supports a combination of one or more flags of Gantt.OverviewVisibleEnum type, as follows:

• exOverviewHidden(0), the control's overview is not visible
• exOverviewShowOnlyVisible(1), the control's overview shows the bars from the visible items using the range of bars in the visible items only
• exOverviewShowAllVisible(2), the control's overview shows the bars from the visible items using the range for all bars in the chart
• exOverviewAllowVerticalScroll(0x100), indicates whether the user can vertically scroll the chart while navigating up or down the overview part of the control. For instance, you can click the overview panel, the chart displays the selected area, and you can drag the cursor left or right to select a new date-time range to be displayed, or you can go up or down, to scroll items up or down
• exOverviewHideBars(0x200), prevents showing the bars in the overview part of the control. For instance, you can use this flag in combination of any other flag to show just the time-scale in the overview part of the control, to allow the user to quickly scroll the chart's content to a specific time-zone
• exOverviewShowDateTimeScale(0x1000), specifies whether the overview part of the control displays the date-time scale. This flag includes the time-scale on the overview. The time-scale intersects the bars in the overview. By default, the time-scale of the overview part is shown on the top of it, so you can combine the exOverviewShowDateTimeScale flag with exOverviewShowDateTimeScaleBottom flag, to display the time-scale on the bottom side of the overview part of the control
• exOverviewShowDateTimeScaleSplit(0x1400), specifies whether the overview's date-time scale is displayed into a separate portion of the overview. This flag includes the time-scale on the overview. The time-scale does not intersect the bars in the overview. By default, the time-scale of the overview part is shown on the top of it, so you can combine the exOverviewShowDateTimeScaleSplit flag with exOverviewShowDateTimeScaleBottom flag, to display the time-scale on the bottom side of the overview part of the control
• exOverviewShowDateTimeScaleBottom(0x1800), specifies whether the overview's date-time scale is displayed on the bottom side of the overview. By default, the time-scale of the overview part is shown on the top of it, so you can use the exOverviewShowDateTimeScaleBottom flag with exOverviewShowDateTimeScale or exOverviewShowDateTimeScaleSplit to display the time-scale on the bottom side of the overview part of the control
• exOverviewShowMargins(0x2000), displays the limits of the overview bars. You can include the exOverviewShowMargins flag to display the margins/limits of all (project) / visible bars. In other words, the exOverviewShowMargins flag displays the minimal ItemBar(exBarStart) value, and the maximal ItemBar(exBarEnd) value. The overviewMarginsFormat field specifies the format used to display margin dates in the overview section of the control.
• exOverviewShowSelMargins(0x4000), displays the selection limits (first/last visible date in the chart). The overviewMarginsFormat field specifies the format used to display margin dates in the overview section of the control.
• exOverviewSplitter(0x10000), specifies whether the overview's horizontal splitter is visible or hidden(makes the control's overview resizable or fixed)

0 or exontrol.Gantt.OverviewVisibleEnum.exOverviewHidden {number}, the control's overview is hidden
70658 or exontrol.Gantt.OverviewVisibleEnum.exOverviewSplitter | exontrol.Gantt.OverviewVisibleEnum.exOverviewShowDateTimeScaleSplit | exontrol.Gantt.OverviewVisibleEnum.exOverviewShowAllVisible {number}, indicates that the overview is resizable, it displays the bars for all items and the overview time-scale too

The OverviewZoomCaption property gets or sets the captions for each zooming unit. The captions are displayed in the zoom scale of the chart's overview. By default, the captions are: "Year|½Year|¼Year|Month|Week|Day|Hour|Minute|Second". The OverviewZoomCaption property defines a string expression that defines a list of captions ( one for each unit ) being displayed in the zoom scale, separated by | character. The list should contain a caption for each unit, from the exYear to exSecond. For instance, if you want to show nothing for exHalfYear zooming unit, the OverviewZoomCaption should be: "Year||¼Year...", and so on.

"|||Month||Week|Day|||" {string}, shows just month, week and day scales into the overview
"Year|||Month||Week|Day|||" {string}, shows year, month, week and day scales into the overview

The OverviewZoomUnit property gets or sets the width of the time-unit scale in the overview. The overview zoom section displays the time-scales the user can zoom to. The AllowOverviewZoom property shows or hides the time-scales on the chart's overview. The OverviewZoomUnit property defines the width of each time-unit in pixels. By default, the OverviewZoomUnit property is 42 pixels.

0 {number}, the overview displays no zooming time-scales
36 {number}, sets the width of the zooming time-scale to 36 pixels

The PaneWidthLeft property changes the width of the left-pane (items), while the right-pane (chart) updates its width accordingly. To hide the left-pane (items), set its width to 0. The PaneWidthRight property gets or sets the width of the control's right-pane (chart), while the left-pane (items) updates its width accordingly. The PaneWidthLeft property is equivalent with SetPaneWidth() / SetPaneWidth(false). The PaneWidthRight property is equivalent with SetPaneWidth(true).

0 {number}, hides the control's left-pane (items)
 300 {number}, changes the width of control's left-pane (items) to 300

The following statement is equivalent:

 oGantt.Chart.SetPaneWidthLeft(300) {number}, changes the width of control's left-pane (items) to 300
 oGantt.Chart.PaneWidthLeft = 300 {number}, changes the width of control's left-pane (items) to 300
 oGantt.Chart.SetPaneWidth(false, 300) {number}, changes the width of control's left-pane (items) to 300

where oGantt is an object of Gantt type

The PaneWidthRight property gets or sets the width of the control's right-pane (chart), while the left-pane (items) updates its width accordingly. To hide the right-pane (chart), set its width to 0. The PaneWidthRight property is equivalent with SetPaneWidth(true). The PaneWidthLeft property is equivalent with SetPaneWidth() / SetPaneWidth(false). To hide the right-pane (chart), set its width to 0. The right-pane (chart) displays the chart area of the control. The left-pane (items) displays the items area of the control. The PaneWidthRight property is equivalent with SetPaneWidth(true). The PaneWidthLeft property is equivalent with SetPaneWidth() / SetPaneWidth(false). To hide the right-pane (chart), set its width to 0.

0 {number}, hides the control's right-pane (chart)
 300 {number}, changes the width of control's right-pane (chart) to 300

The following statement is equivalent:

 oGantt.Chart.SetPaneWidthRight(300) {number}, changes the width of control's right-pane (chart) to 300
 oGantt.Chart.PaneWidthRight = 300 {number}, changes the width of control's right-pane (chart) to 300
 oGantt.Chart.SetPaneWidth(true, 300) {number}, changes the width of control's right-pane (chart) to 300

where oGantt is an object of Gantt type

The ResizeUnitCount property gets sets the count of time-unit(s) to create, move or resize bars. The ResizeUnitScale property gets or sets the time-unit to create, move or resize bars. The count of time-unit(s) defines how many time-units of the given time-unit scale are used to create, move or resize bars. By default, the count of time-unit(s) is null, which means that the count of time-unit(s) of the chart's base level indicates the count of time-unit(s) to create, move or resize bars.

null {null}, the count of time-unit(s) of the chart's base level indicates the count of time-unit(s) to create, move or resize bars
4 {number}, creates, moves, or resizes at every fourth time unit

The ResizeUnitScale property gets or sets the time-unit to create, move or resize bars. The ResizeUnitCount property gets or sets the count of time-unit(s) to create, move or resize bars. The time-unit to create, move or resize bars is by default null, which means that the time-unit of the chart's base level indicates the time-unit to create, move or resize bars. By default, the ResizeUnitScale is null, meaning that the time-unit of the chart's base level indicates the time-unit to create, move or resize bars. The ResizeUnitScale property, of exontrol.UnitEnum type support the following values:

• exYear (0), indicates the year scale
• exHalfYear (1), indicates the half-year scale
• exQuarterYear (2), indicates the quarter-year scale
• exMonth (0x10), indicates the month scale
• exThirdMonth (0x11), indicates the third-month scale
• exWeek (0x100), indicates the week scale
• exDay (0x1000), indicates the day scale
• exHour (0x10000), indicates the hour scale
• exMinute (0x100000), indicates the minute scale
• exSecond (0x1000000), indicates the second scale

null {null}, the chart's resize unit-scale is identichal with the chart's unit-scale (unitScale property)
 0x10000 or exontrol.UnitEnum.exHour {number}, sets the chart's resize unit-scale to hours

The following statements are equivalents:

 oGantt.Chart.SetResizeUnitScale(0x10000), sets the chart's resize unit-scale to hours
 oGantt.Chart.ResizeUnitScale = 0x10000, sets the chart's resize unit-scale to hours

where oGantt is an object of Gantt type

The ScrollBar property shows or hides the chart's horizontal scroll-bar. The GetScrollBar() method specifies whether the chart's horizontal scroll-bar is visible or hidden. The SetScrollBar() method shows or hides the chart's horizontal scroll-bar. The ScrollRange property gets or sets the range of dates to scroll within. The FirstVisibleDate property gets or sets the chart's first visible date. By default, the ScrollBar property is set to true (the chart's horizontal scroll-bar is visible).

true {boolean}, shows the chart's horizontal scroll-bar
 false {boolean}, hides the chart's horizontal scroll-bar

The following statements are equivalent:

 oGantt.Chart.SetScrollBar(false); {boolean}, hides the chart's horizontal scroll-bar
 oGantt.Chart.ScrollBar = false; {boolean}, hides the chart's horizontal scroll-bar

where oGantt is an exontrol.Gantt object

The ScrollRange property gets or sets the range of dates to scroll within. The Chart.ScrollBar property shows or hides the chart's horizontal scroll-bar. The ScrollRange property is using the GetScrollRange() and SetScrollRange() methods. The StartPrintDate property gets the minimum-date for the entire chart (lower date) as undefined (the chart includes no bars) or the minimum-date for the entire chart (lower date). The EndPrintDate property gets the maximum-date for the entire chart (upper date), as undefined (the chart includes no bars) or the maximum-date for the entire chart (upper date). The Zoom() method zooms the chart so the start-end interval fits the client's area. The ScrollTo() method scrolls the chart to ensure that specified date fits the chart's area. By default, the ScrollRange property is null, meaning that there is no limit for scrolling the chart.

The following sample limits the chart's scroll-range to Jan 1st, 2001 to Jan 1st, 2002:

{
   start: 2001
   end: 2002
}

The following sample limits the chart's scroll-range to Apr 1st, 2021 to Apr 30, 2021:

{
   start: "#4/1/2021#"
   end: "#4/30/2021#"
}

The following statements are equivalent:

 oGantt.Chart.SetScrollRange({start:2001, end:2002}); {ScrollRangeType}, sets the range of dates to scroll within 2001 to 2002
 oGantt.Chart.ScrollRange = {start:2001, end:2002}; {ScrollRangeType}, sets the range of dates to scroll within 2001 to 2002

where oGantt is an exontrol.Gantt object

The SelectDates property gets or sets the selected-dates. The AllowSelectDate property specifies whether the chart supports single, multiple, toggle date(s) selection. By default, no date is selected. The SelectDates property specifies the selected-dates as one of the following:

• value {array}, indicates an array of value(s) (could be any of the following)
• value {object}, any object that contains "s", "e", "start" and/or "end" fields to specify the start/end margins of the time-period
• value {any}, returns a 1-second time-period starting from giving value. The value could be any of the following:
  • value {string}, defines the date in string-format as "#MM/DD/YYYY[ HH:mm:ss]#"
  • value {Date}, indicates a JavaScript date
  • value {number} integer value representing the year of the date

null {null}, removes all selected dates
 {start: 2001, end: 2002} {object}, selects the time zone from Jan 1st 2001, to Jan 1st 2002
 {start: Date.Today(), end: Date.Today().NextDay()} {object}, selects today
 ["#12/31/2000#",{start: "#1/1/2001#", end: "#1/2/2001#"}] {array}, selects one second from "Sun, 31 Dec 2000 00:00:00 GMT" to "31 Dec 2000 00:00:01 GMT", and one day from "Mon, 01 Jan 2001 00:00:00 GMT" to "Tue, 02 Jan 2001 00:00:00 GMT"
 "#12/31/2000#" {string}, selects one second from "Sun, 31 Dec 2000 00:00:00 GMT" to "31 Dec 2000 00:00:01 GMT"

The following statements are equivalents:

 oGantt.Chart.SetSelectDates({start:2001, end:2002}); {object}, selects the time zone from Jan 1st 2001, to Jan 1st 2002
 oGantt.Chart.SelectDates = {start:2001, end:2002}; {object}, selects the time zone from Jan 1st 2001, to Jan 1st 2002

where oGantt is an object of Gantt type

The Selection property gets or sets the chart's selection. The SingleSel property specifies whether the chart supports single, multiple, or toggle selection. The SetSelection method can also clear the chart's selection by setting it to null. The Selection property is equivalent with Chart.GetSelection() and Chart.SetSelection() methods. The ItemBar.Selected property selects or unselects the item-bar. The Gantt.Selection property gets or sets the selection of the control, representing the selected items, whereas Chart.Selection gets or sets the selection within the chart, representing the selected item-bars. The RemoveSelection() method removes the selected item-bars from the chart, and returns the number of removed item-bars.

The Selection property can be any of the following:

• value {null}, specifies that the entire selection is cleared (unselects all)
• value {Items}, selects all item-bars of all items (select all)
• value {exontrol.Tree.Item}, selects all item-bars of specified item
• value {ItemBar}, selects the item-bar giving its reference as an object of ItemBar type
• value {ItemBar[]}, selects item-bars giving an array of [ItemBar] type (collection of item-bars) or [exontrol.Tree.Item] type (collection of items)

oGantt.Chart.Selection = null, clears the chart's selection (unselects all)
  oGantt.Chart.Selection = oGantt.Items, selects all item-bars of all items (select all)
  oGantt.Chart.Selection = oItem, selects all item-bars of specified item

The following statements are equivalents:

  oGantt.Chart.SetSelection( oItemBar ), selects the item-bar giving its reference as an object of ItemBar type
  oGantt.Chart.Selection = oItemBar, selects the item-bar giving its reference as an object of ItemBar type

 where oGantt is an object of Gantt type, oItem is an object of exontrol.Tree.Item type, and oItemBar is an object of ItemBar type

The ShowLinks property shows or hides links between bars. The Add, Clear, Remove, and other methods of the Links object allow you to manage the links between item-bars. The Links method gets the control's links. By default, the ShowLinks property is exontrol.ShowLinksEnum.exExtended | exontrol.ShowLinksEnum.exCrossRect, meaning that the links are shown as extended rectangular links.

The ShowLinks property is a combination of exontrol.ShowLinksEnum flags as follows:

• exHide (0), specifies that no links are visible
• exExtended (0x01), specifies that links are shown as extended
• exShow (0x02), specifies that links are visible (the links are always shown while not exHide)
• exFront (0x10), specifies that links are shown in front (by default, the control are shown on the background)
• exCrossRect (0x20), shows rectangular cross-links
• exCrossTriangle (0x20), shows triangular cross-links
• exCrossMixt (0x60), shows mixt cross-links
• exPreventOverlap (0x100), adjusts the links to prevent them from overlapping the connected objects. The exPreventOverlap flag has effect only for rectangular links. The exPreventOverlap option calculates the path between A and B using the A* (A-star) pathfinding algorithm, which can be a time-consuming operation. The exontrol.L.PO.dir.def specifies the default directions for determining the best route between two points, A and B. These directions are represented as a combination of the letters R (Right), L (Left), U (Up), and D (Down), separated by commas ("RLDU,DURL" {string}, indicates the shortest route between RLDU and DURL directional path). When used with the exPreventOverlapMixt flag, it ensures that links avoid overlapping with elements or obstacles, enabling their paths to include both rectangular and diagonal lines. (@since 4.0)
• exPreventOverlapMixt (0x80), When used with the exPreventOverlap flag, it ensures that links avoid overlapping with elements or obstacles, enabling their paths to include both rectangular and diagonal lines. When combined with the exChangeColorOnOverlap flag, overlapping links alternately adjust their width in addition to changing colors. The exPreventOverlapMixt flag must always be used alongside either the exPreventOverlap or exChangeColorOnOverlap flag. (@since 4.0)
• exChangeColorOnOverlap (0x200), changes the color for links in areas where they overlap with other links, enhancing clarity and distinction between them. The exontrol.L.PO.OverlapColors defines the list of colors, separated by commas, used to display overlapping links. When combined with the exPreventOverlapMixt flag, overlapping links alternately adjust their width in addition to changing colors. (@since 4.0)

0 or exontrol.ShowLinksEnum.exHide {number}, hides the links
1 or exontrol.ShowLinksEnum.exShow {number}, shows the links (on the background)
33 or exontrol.ShowLinksEnum.exExtended | exontrol.ShowLinksEnum.exCrossRect {number}, shows "extended" and "cross" links

The ShowNonworkingDays property specifies whether the chart highlights or does not highlight the non-working days.. The NonworkingDays property specifies the chart's non-working days. The SetShowNonworkingUnits property shows or hides the non-working units in base-level. The "nw" entry of the Shapes property defines the visual appearance used to display non-working units. By default, the ShowNonworkingDays property is set to true (the chart's non-working days are visible).

false {boolean}, hides the chart's non-working days
true {boolean}, shows the chart's non-working days

The ShowNonworkingHours property shows or hides the chart's non-working hours (marks the non-working hours). The NonworkingHours property specifies the chart's non-working hours. The ShowNonworkingUnits property shows or hides the non-working units in base-level. By default, the ShowNonworkingHours property is set to true (the chart's non-working hours are visible). The "nw" entry of the Shapes property defines the visual appearance used to display non-working units.

false {boolean}, hides the chart's non-working hours
true {boolean}, shows the chart's non-working hours

The ShowNonworkingUnits property shows or hides the chart's non-working units (days and hours). The ShowNonworkingDays property specifies whether the chart highlights the non-working days. The ShowNonworkingHours property specifies whether the chart highlights the non-working hours. The ShowNonworkingDays property marks the non-working days, while the ShowNonworkingHours property marks the non-working hours within each day. The ShowNonworkingUnits property shows or hides the non-working units in base-level. By default, the ShowNonworkingUnits property is set to true (the chart's non-working units are visible). By default, the ShowNonworkingUnits property is set to true (the chart's non-working units are visible).

false {boolean}, hides the chart's non-working units (days and hours)

The SingleSel property gets or sets the chart's selection to single, multiple or toggle. The ItemBar.Selected property selects or unselects the item-bar. The Selection property gets or sets the chart's selection. The RemoveSelection() method removes the objects(bars) of the chart's selection. By default, the chart's selection is enabled for multiple-selection. By default, the chart's selection is enabled for multiple-selection.

The SingleSel property accepts an OR combination of exontrol.Tree.SingleSelEnum flags to specify how the user can select item-bars, as explained:

• exDisableSel(0), specifies that the chart's selection is disabled (can not be combined with any other flags)
• exEnableSel(1), specifies that the chart's selection is enabled (multiple-selection, unless the exSingleSel is set )
• exSingleSel(2), specifies that the user can select an item-bar only
• exToggleSel(4), specifies that the item-bar's selection state is toggled once the user clicks an item-bar.
• exDisableCtrlSel(8), disables toggling the item-bar's selection state when user clicks an item-bar, while CTRL modifier key is pressed.
• exDisableShiftSel(16), disables selecting item-bars using the SHIFT key.
• exDisableDrag(32), disables selecting item-bars by drag.

By default, the chart's selection is enabled for multiple-selection.

0 or exontrol.Tree.SingleSelEnum.exDisableSel {number}, disables selecting any item-bar
3 or exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel {number}, enables chart's single selection, so only a single item-bar can be selected
6 or exontrol.Tree.SingleSelEnum.exToggleSel | exontrol.Tree.SingleSelEnum.exSingleSel {number}, enables chart's single and toggle selection, which means that once an item-bar is selected it gets unselected once it is clicked, or reverse, and only a single-item-bar can be selected at once.

The StartPrintDate property gets the minimum-date for the entire chart (lower date) as undefined (the chart includes no bars) or the minimum-date for the entire chart (lower date). The EndPrintDate property gets the maximum-date for the entire chart (upper date), as undefined (the chart includes no bars) or the maximum-date for the entire chart (upper date). The FirstVisibleDate property gets or sets the chart's first visible date. The LastVisibleDate property gets the chart's last visible date.

The following statements are equivalents:

 oGantt.Chart.GetStartPrintDate(), gets the minimum-date for the entire chart (lower date)
 oGantt.Chart.StartPrintDate, gets the minimum-date for the entire chart (lower date)

where oGantt is an object of Gantt type

The ToolTips property defines the predefined-tooltips of each time-unit. The GetToolTip(unit) method gets the predefined-tooltip for specified unit. The chart's header is organized into multiple levels, each capable of displaying its own time scale. Each level represents a specific time unit, and hovering the cursor over it displays a tooltip for that time unit. The Level() method retrieves the level based on its index, the Level.Unit property retrieves the time-unit of the level as a value of exontrol.UnitEnum type, and the Level.ToolTip property gets or sets the predefined-tooltip for the level. The tooltip for each level supports ex-HTML tags, allowing you to include elements like images using the <img> tag.

The ToolTips property of supports the following fields:

year {string}, specifies the predefined format of the level when it displays years
halfYear {string}, specifies the predefined format of the level when it displays half of years
quarterYear {string}, specifies the predefined format of the level when it displays quarter of years
month {string}, specifies the predefined format of the level when it displays months
thirdMonth {string}, specifies the predefined format of the level when it displays third of months
week {string}, specifies the predefined format of the level when it displays weeks
day {string}, specifies the predefined format of the level when it displays days
hour {string}, specifies the predefined format of the level when it displays hours
minute {string}, specifies the predefined format of the level when it displays minutes
second {string}, specifies the predefined format of the level when it displays seconds

The following sample shows how predefined-tooltips can be defined:

 {
   year: "<%yyyy%>",
   month: "<%mmmm%> <%yyyy%>",
   week: "<%mmmm%> <b><%d%></b>, <%yyyy%>/<%ww%>",
   day: "<%dddd%>, <%mmmm%> <b><%d%></b>, <%yyyy%>",
   hour: "<%dddd%>, <%mmmm%> <b><%d%></b>, <%yyyy%> <%h%> <%AM/PM%>",
   minute: "<%dddd%>, <%mmmm%> <b><%d%></b>, <%yyyy%> <%h%>:<%nn%> <%AM/PM%>",
   second: "<%dddd%>, <%mmmm%> <b><%d%></b>, <%yyyy%> <%h%>:<%nn%>:<%ss%> <%AM/PM%>"
 }

The following statements are equivalents:

 oGantt.Chart.SetToolTips({...}), sets predefined-tooltips of each time-unit
 oGantt.Chart.ToolTips = {...}, sets predefined-tooltips of each time-unit

where oGantt is an object of Gantt type

The UnitScale property gets or sets the chart's unit scale. The base unit is the smallest time-unit that the chart displays. The UnitWidth property defines the width of the base unit. The UnitScale property of exontrol.UnitEnum type supports the following values:

• exYear (0), indicates the year scale
• exHalfYear (1), indicates the half-year scale
• exQuarterYear (2), indicates the quarter-year scale
• exMonth (0x10), indicates the month scale
• exThirdMonth (0x11), indicates the third-month scale
• exWeek (0x100), indicates the week scale
• exDay (0x1000), indicates the day scale
• exHour (0x10000), indicates the hour scale
• exMinute (0x100000), indicates the minute scale
• exSecond (0x1000000), indicates the second scale

By default, the base unit is exontrol.UnitEnum.exDay, which indicates that the chart displays days as the smallest time-unit.

256 or exontrol.UnitEnum.exWeek {number}, sets the chart to display weeks
4096 or exontrol.UnitEnum.exDay {number}, sets the chart to display days

The following statements are equivalents:

 oGantt.Chart.SetUnitScale(value), sets the chart's unit scale
 oGantt.Chart.UnitScale = value, sets the chart's unit scale

where oGantt is an object of Gantt type

The UnitWidth property gets ot sets the width to display the units in base-level. The base-level is the level that displays the base unit, as specified by the UnitScale property. The MinUnitWidth and MaxUnitWidth properties specify the minimum and maximum width of the units within the base-level, while the user resizes or zooms-in/out the chart. The UnitWidth property is clamped between MinUnitWidth and MaxUnitWidth properties. The UnitWidthNonworking property specifies the width to display the non-working units in base-level. The MinUnitWidth and MaxUnitWidth properties define the range within which the UnitWidth can vary when the AllowActions property includes the "chart-resize" or "chart-zoom" actions. For instance, when "chart-zoom" is enabled, the MinUnitWidth sets the threshold at which the chart switches to a smaller unit scale as the UnitWidth approaches it. By default, the UnitWidth property is set to 18-pixels.

8 {number}, changes the width for units in the base-level to 8-pixels

The UnitWidthNonworking property gets or sets the width to display the non-working units in base-level. The UnitWidth property specifies the width to display the units in base-level. The base-level is the level that displays the base unit, as specified by the UnitScale property. The NonworkingDays property specifies which days are non-working days. The NonworkingHours property specifies which hours are non-working hours within a working day. The ShowNonworkingUnits property specifies whether the chart displays non-working units. The UnitWidthNonworking property supports the following values:

• 0 {number}, no effect (the unitWidth field specifies the width for all units, including the non-working units in base-level). The showNonworkingUnits field, specifies whether the chart displays non-working units.
• negative {number}, indicates that neighbor non-working units are shown as a single non-working unit with specified width ( absolute value )
• positive {number}, indicates the width for non-working units

By default, the UnitWidthNonworking property is set to 0, which indicates no effect (the UnitWidth property specifies the width for all units, including the non-working units in base-level).

0 {number}, no effect (the unitWidth field specifies the width for all units, including the non-working units in base-level)
 -18 {number}, neighbor non-working units are shown as a single non-working unit with specified width (18-pixels wide)

The following statements are equivalents:

 oGantt.Chart.SetUnitWidthNonworking(value), sets the width to display the non-working units in base-level
 oGantt.Chart.UnitWidthNonworking = value, sets the width to display the non-working units in base-level

where oGantt is an object of Gantt type

The Bar() method retrieves a bar by index, name, or reference. Calling Bar(name) is equivalent to Bars.Item or Gantt.Bar. It returns a Bar object that defines a bar type supported by the chart. The Bars property returns the control's bars as a Bars collection. This collection contains the predefined bar types available in the chart. Each bar acts as a template that determines how a task, milestone, or any other item is displayed in the chart area. The BarOptions type defines a bar's properties, such as height, shape, captions, and others. The ItemBar() method retrieves an item-bar for a specified item and key, returning an ItemBar object. It is equivalent to Item.ItemBar and is used to access the item-bars associated with the control's items.

The following statements are equivalents:

   oGantt.Bar("Task") {Bar}
   oGantt.Chart.Bar("Task") {Bar}
   oGantt.Chart.Bars.Item("Task") {Bar}

 and returns the "Task" bar

where oGantt is an object of Gantt type

The EnsureVisibleSelection() method scrolls the chart to ensure that the chart's selection fits the chart's view. The Chart.SingleSel property specifies whether the chart supports single, multiple, toggle selection. If the EnsureVisibleSelection() method is called without parameters, the chart scrolls to ensure that the current chart's selection fits the chart's visible area. If the EnsureVisibleSelection() method is called with an object of {expandParents, selection, duration} type as parameter, the chart scrolls to ensure that the specified item-bars fit the chart's visible area, and expands the parent-items as well according with the expandParents option.The Chart.Selection property specifies the chart's selected-objects(bars).

oGantt.Chart.EnsureVisibleSelection({selection: [oGantt.ItemBar(0,"Sum")]}), scrolls the chart to ensure that the "Sum"-bar of the first item, fits the chart's visible area.

where oGantt is an object of Gantt type

The GetLabel() method retrieves the predefined format of a level's label for a specified time unit. The Chart.Labels property retrieves the predefined format used to display each level's label for every time unit. The SetLabel() method sets the predefined format of the level's label for specified unit. The chart's header is organized into multiple levels, each capable of displaying its own time scale. Each level shows date-time values according to the Chart.Labels property. Since Chart.Labels provides a list of alternative captions, the control automatically selects the most appropriate one based on the available width of the time unit. The Level() method retrieves the level based on its index, the Level.Unit property retrieves the time-unit of the level as a value of exontrol.UnitEnum type, and the Level.Label property gets or sets the predefined format of the level's label.

The following statements are equivalents:

 oGantt.Chart.GetLabel(exontrol.UnitEnum.exMonth) {string}, gets the predefined format of the level's label for month unit
 oGantt.Chart.Labels.month {string}, gets the predefined format of the level's label for month unit

where oGantt is an object of Gantt type

The GetPaneWidth() method gets the width of the left(items) or right(chart) pane. The PaneWidthLeft property is equivalent with GetPaneWidth() / GetPaneWidth(false), and PaneWidthRight property is equivalent with GetPaneWidth(true). The SetPaneWidth() method changes the width of the left(items) or right(chart) pane. To hide the left(items) or right(chart) pane, set its width to 0.

The following statements are equivalent:
 
 oGantt.Chart.GetPaneWidth() {number}, gets the width of the left(items) pane
 oGantt.Chart.GetPaneWidth(false) {number}, gets the width of the left(items) pane
 oGantt.Chart.PaneWidthLeft {number}, gets the width of the left(items) pane
 oGantt.Chart.GetPaneWidthLeft() {number}, gets the width of the left(items) pane

where oGantt is an object of Gantt type

The GetToolTip() method gets the predefined-tooltip for specified unit. The SetToolTip() method sets the predefined-tooltip's label for specified unit. The ToolTips property defines predefined-tooltips of every time-unit. The chart's header is organized into multiple levels, each capable of displaying its own time scale. Each level represents a specific time unit, and hovering the cursor over it displays a tooltip for that time unit. The Level() method retrieves the level based on its index, the Level.Unit property retrieves the time-unit of the level as a value of exontrol.UnitEnum type, and the Level.ToolTip property gets or sets the predefined-tooltip for the level. The tooltip for each level supports ex-HTML tags, allowing you to include elements like images using the <img> tag.

The following statements are equivalents:

 oGantt.Chart.GetToolTip(exontrol.UnitEnum.exMonth) {string}, gets the predefined-tooltip for month unit
 oGantt.Chart.ToolTips.month {string}, gets the predefined-tooltip for month unit

where oGantt is an object of Gantt type

The HistogramValue() method gets the value in the histogram at specified date-time. The Bar.ShowHistogramValues property gets or sets the formula/expression the bar uses to display its value within the control's histogram. The Bar.FormatHistogramValues property formats the bar's value in the histogram.

oGanttChart.HistogramValue("min") {number}, gets the minimum cumulated histogram-value, excepts 0
 oGanttChart.HistogramValue("max") {number}, gets the maximum cumulated histogram-value

The following example shows how to get the histogram value at the date-time corresponding to the mouse position over the control's histogram:

 cvsGantt.onmousemove = function(event)
 {
   console.log(oChart.HistogramValue(oGantt.oGV.p2UL(oGantt.oGV.gPtr(event), 8).r));
 }

where oGantt is the Gantt control's instance, oChart is the chart object (oGantt.Chart), and oGantt.oGV.p2UL() method converts the mouse position into a date-time value.

The Level() method retrieves the level based on its index. The chart supports one or more levels within its header. The LevelCount property gets or sets the number of levels the chart's header displays. The Unit property of each level retrieves the time-unit of the level as a value of exontrol.UnitEnum type. The Label property of each level gets or sets the predefined format of the level's label. The label can contain multiple alternative HTML labels, separated by <|>, and can include values for Level.Count and Level.Unit, separated by <||>, as described in the Level.Label property. The first level (index 0) is the lowest level, which is the closest to the chart's bars, and the last level (index LevelCount - 1) is the highest level, which is the farthest from the chart's bars.

oGantt.Chart.Level(0), gets the first level of the chart's header

The RemoveSelection() method removes the selected item-bars from the chart, and returns the number of removed item-bars. If no item-bar is selected, it returns 0. The selection can be cleared by setting the selection to null, using the Chart.Selection property. The ItemBar.Selected property selects or unselects the item-bar. The Gantt.Selection property gets or sets the selection of the control, representing the selected items, whereas Chart.Selection gets or sets the selection within the chart, representing the selected item-bars. In summary, setting the Selection property to null only unselects the item-bars without removing them from the chart, whereas the RemoveSelection() method both removes the selected item-bars from the chart and clears the selection.

The ScrollTo() method scrolls the chart to ensure that specified date fits the chart's area. The FirstVisibleDate property gets or sets the chart's first visible date. The ScrollRange property gets or sets the range of dates to scroll within. The Chart.ScrollBar property shows or hides the chart's horizontal scroll-bar. The Zoom() method zooms the chart so the start-end interval fits the client's area. By default, the ScrollTo() method scrolls the chart to ensure that the specified date is centered in the chart's area (the align parameter is exAlignCenter by default).

oGantt.Chart.ScrollTo("#9/1/1994#"), scrolls the chart to ensure that Sep 1st, 1994 is centered in the chart's area, equivalent to oGantt.Chart.FirstVisibleDate = "#9/1/1994#"
oGantt.Chart.ScrollTo("#9/1/1994#", "right"), scrolls the chart to ensure that Sep 1st, 1994 is aligned to the right in the chart's area

The SetLabel() method sets the predefined format of the level's label for specified unit. The Chart.Labels property defines the predefined format to display the level's label of every time-unit. The GetLabel() method retrieves the predefined format of a level's label for a specified time unit. The chart's header is organized into multiple levels, each capable of displaying its own time scale. Each level shows date-time values according to the Chart.Labels property. Since Chart.Labels provides a list of alternative captions, the control automatically selects the most appropriate one based on the available width of the time unit. The Level() method retrieves the level based on its index, the Level.Unit property retrieves the time-unit of the level as a value of exontrol.UnitEnum type, and the Level.Label property gets or sets the predefined format of the level's label.

oGantt.Chart.SetLabel(exontrol.UnitEnum.exMonth, "<%mmmm%> <%yyyy%>") {string}, sets the predefined format of the level's label for month unit

The SetPaneWidth() method sets the width of the left(items) or right(chart) pane. The PaneWidthLeft property is equivalent with SetPaneWidth() / SetPaneWidth(false), and PaneWidthRight property is equivalent with SetPaneWidth(true). To hide the left(items) or right(chart) pane, set its width to 0.

The SetToolTip() method sets the predefined-tooltip's label for specified unit. The GetToolTip() method gets the predefined-tooltip for specified unit. The ToolTips property defines predefined-tooltips of every time-unit. The GetToolTip(unit) method gets the predefined-tooltip for specified unit. The chart's header is organized into multiple levels, each capable of displaying its own time scale. Each level represents a specific time unit, and hovering the cursor over it displays a tooltip for that time unit. The Level() method retrieves the level based on its index, the Level.Unit property retrieves the time-unit of the level as a value of exontrol.UnitEnum type, and the Level.ToolTip property gets or sets the predefined-tooltip for the level. The tooltip for each level supports ex-HTML tags, allowing you to include elements like images using the <img> tag.

oGantt.Chart.SetToolTip(exontrol.UnitEnum.exMonth, "<%mmmm%> <%yyyy%>") {string}, sets the predefined-tooltip for month unit

The Zoom() method zooms the chart so the start-end interval fits the client's area. The ScrollRange property gets or sets the range of dates to scroll within. The Chart.ScrollBar property shows or hides the chart's horizontal scroll-bar. The FirstVisibleDate property gets or sets the chart's first visible date. The ScrollTo() method scrolls the chart to ensure that specified date fits the chart's area. By default, the Zoom() method changes the chart's unit-width (the changeUnitWidth parameter is true by default), but it can be set to keep the same unit-width (by setting the changeUnitWidth parameter to false).

oGantt.Chart.Zoom("#9/1/1994#", "#10/1/1994#"), zooms the chart to fit the interval from Sep 1st, 1994 to Oct 1st, 1994
 oGantt.Chart.Zoom(new Date(1994,8,1), new Date(1994,9,1)), zooms the chart to fit the interval from Sep 1st, 1994 to Oct 1st, 1994
 oGantt.Chart.Zoom(1994, 1995), zooms the chart to fit the interval from Jan 1st, 1994 to Jan 1st, 1995

The unkS() method defines the shape to show "unknown" bars. An unknown bar is a bar that has's used but it has not been defined into the Bars collection. If a bar is removed from the Bars collection but it is still used by an item, the control shows the bar as "unknown" bar.

The following statement sets a custom-shape to show "unknown" bars:

 oGantt.Chart.unkS = function()
 {
   return this.oUnkS || (this.oUnkS = 
   {
     frameColor: "red",
     patternColor: "orangered",
     pattern: exontrol.PatternEnum.exPatternFDiagonal,
     opacity: 0.25,
     primitive: "Round"
   })
 }

where oGantt is an object of Gantt type