Gantt Chart

ALIAS: gantt

Example of Gantt Chart:

FusionCharts should load here..

JavaScript embedding code:

    <script type="text/javascript">
    FusionCharts.ready(function(){
        var myChart = new FusionCharts({
            "type": "gantt",
            "dataFormat": "jsonurl",
            "dataSource": "chartdata.json"
            });
        });
    </script>

Data for this chart:

...

Chart Attributes

Chart Captions

These attributes let you configure chart captions.

Name Type Description
caption String Caption of the chart.
subCaption String Sub-caption of the chart.

Chart Caption Cosmetics

These attributes let you configure the cosmetics of chart caption and sub-caption.

Name Type Range Description
captionAlignment String "left", "center", "right" Sets horizontal alignment of caption
captionOnTop Boolean 0/1 Whether caption should be on top of the data plot area
captionFontSize Number 0 - 72 Sets the caption font size in pixels
subCaptionFontSize Number 0 - 72 Sets the sub-caption font size (in pixels)
captionFont String Font Name Sets the caption font family
subCaptionFont String Font Name Sets the sub-caption font family
captionFontColor Color Hex Code Sets the caption font color
subCaptionFontColor Color Hex Code Sets the sub-caption font color
captionFontBold Boolean 0/1 Whether the caption font should be displayed in bold
subCaptionFontBold Boolean 0/1 Whether the sub caption font should be displayed in bold
alignCaptionWithCanvas Boolean 0/1 Whether the caption is aligned with the canvas. Else, it will be aligned with the entire chart area
captionHorizontalPadding Number In Pixels If caption is not centre aligned, lets you configure the padding (in pixels) from either edge. Will be ignored if caption is centre aligned.

Functional Attributes

You can control a variety of functional elements on the chart. For example, you can opt to show/hide data labels, data values, y-axis values. You can also set chart limits and extended properties.

These attributes let you control the functional properties in a Gantt chart.

Name Type Range Description
dateFormat Date 'mm/dd/yyyy' or 'dd/mm/yyyy' or 'yyyy/mm/dd' This attribute helps you specify the input date format for all the dates in your XML. This is a mandatory attribute to specify and once specified, all the dates in your XML data should conform to the format specified herein.
outputDateFormat String You can also specify how the dates look on your Gantt chart using this attribute. This attribute takes the output date format as string. You can build your own output date format string as explained in the section "Configuring date formats".
ganttPaneDuration Number If you want your Gantt pane to scroll through a specified time line, you can use this attribute to set what timeline the pane will represent. For example, if you want your Gantt pane to show date only for 3 months and then scroll the rest, you can set this attribute as 3. More of this has been explained in the section "Enable scrolling".
ganttPaneDurationUnit String 'y','m','d','h','mn' or 's' If you've opted to scroll the Gantt pane, this attribute lets you choose the unit of your specified duration. More of this has been explained in the section "Enable scrolling".
showFullDataTable Boolean 0/1 Whether to show full names of the process labels and data columns in grid. If you set this as on, the labels will not wrap and always show in full. When required, a scroll bar will automatically appear for the entire grid.
ganttWidthPercent Number 10-100 You can opt to set the width of the Gantt view pane in percent using this attribute. The rest of the width will be taken by the grid. If the data grid takes lesser space, the chart will automatically adjust the Gantt pane to assume more width.
forceGanttWidthPercent Boolean 0/1 If you want the chart to never automatically adjust the Gantt width and stick to the percent width that you've specified, you can set this attribute to 1.
caption String Caption for the chart.
subCaption String Sub-caption for the chart.
showTaskStartDate Boolean (0/1) 0/1 For each task bar in the Gantt chart, you can show its respective start date on its left. To do so, set this attribute as 1.
showTaskEndDate Boolean (0/1) 0/1 For each task bar in the Gantt chart, you can show its end date value too by setting this attribute as 1.
showTaskLabels Boolean 0/1 Whether to show task labels for each task bar in the Gantt chart. The task labels show up only if they've been defined for the task.
showPercentLabel Boolean 0/1 If you've used the percentage task feature, you can opt to show the percent complete for each task as part of the task label by setting this attribute as 1.
showSlackAsFill Boolean (0/1) 0/1 If you've used the percentage task feature, you can opt to show the slack (percent of work not completed) as either a filled bar or empty bar. To draw as empty bars, set this attribute as 0.
slackFillColor Color Code Hex Code If you've opted to fill the slack bars with color, you can define the color code for the same here.
animation Boolean 0/1 Whether to animate the chart while rendering? If you define this attribute as 0, even your custom defined Style animations will not work.
clickURL String URL Click URL for the entire chart. The entire chart can then act as a hotspot. This URL can be provided in FusionCharts Link format.
annRenderDelay Number In seconds If you've defined any annotation groups to be rendered over the chart, using this attribute you can control the time duration after which they'll appear on the chart.
extendCategoryBg Boolean (0/1) 0/1 If you set this attribute as 1, the Gantt pane grid will take the same background and border properties as that of the last category (visual dateline) defined.
showPrintMenuItem Boolean 0/1 Whether to show "Print Chart" item in the context menu of the chart? Even if you opt to hide the item in context menu, you can still opt to invoke `print()` JavaScript method of the chart to print the same.
scrollToDate Date 'mm/dd/yyyy' Chart will automatically scroll to the given date at the time of rendering. This attribute will only work when `ganttPaneDuration` and `ganttPaneDurationUnit` attributes are set as per requirement. This feature is supported by JavaScript Gantt chart only.
useVerticalScrolling Boolean 0/1 Whether to display the vertical scroll bar or not. By default, the attribute is set to 1 and the vertical scroll bar appears depending on the height of the chart. More of this has been explained in the section "Enable scrolling". This feature is supported by JavaScript Gantt chart only.

Chart Cosmetic Properties

These attributes let you configure chart cosmetics like background color, background alpha, canvas color & alpha etc.

Name Type Range Description
palette Number 1-5 Which pre-defined color palette to use
paletteThemeColor Color Code Hex Code If you want your own palette derived from a particular hex color, you can specify the same here. All other colors on the chart will automatically derive from that palette.
bgColor Color Code Hex Code This attribute sets the background color for the chart. You can set any hex color code as the value of this attribute. To specify a gradient as background color, separate the hex color codes of each color in the gradient using comma. Example: `FF5904, FFFFFF`. Remember to remove # and any spaces in between.
bgAlpha Number 0-100 Sets the alpha (transparency) for the background. If you've opted for gradient background, you need to set a list of alpha(s) separated by comma.
bgRatio String of numbers 0-100 If you've opted for a gradient background, this attribute lets you set the ratio of each color constituent.
bgAngle Number 0-360 Angle of the background color, in case of a gradient.
showBorder Boolean 0/1 Whether to show a border around the chart or not?
borderColor Color Code Hex Code Border color of the chart.
borderThickness Number Border thickness of the chart.
borderAlpha Number 0-100 Border alpha of the chart.
bgImage String To place any image (JPG/PNG/GIF) as background of the chart, enter the (path and) name of the background image. It should be in the same domain as the chart.
bgImageAlpha Number 0-100 This attribute specifies the opacity for the loaded background image.
bgImageDisplayMode
Since 3.2
String 'stretch', 'tile', 'fit', 'fill', 'center', 'none' Helps you specify the mode in which the background image is to be displayed. Stretch - expands the image to fit the entire chart area, without maintaining original image constraints. Tile - the image is repeated as a pattern on the entire chart area. Fit - fits the image proportionately on the chart area. Fill -proportionately fills the entire chart area with the image. Center - the image is positioned at the center of the chart area. None - Default mode.
bgImageVAlign
Since 3.2
String 'top', 'middle', 'bottom' Helps you to vertically align the background image.
bgImageHAlign
Since 3.2
String 'left', 'middle', 'right' Helps you to horizontally align the background image.
bgImageScale
Since 3.2
Number 0-300 Helps you magnify the background image.This attribute will only work when the attribute `bgImageDisplayMode` is set to none, center, or tile.
canvasBgColor Color Code Hex Code Sets Canvas background color. For Gradient effect, enter colors separated by comma.
canvasBgAlpha Number 0-100 Sets alpha for Canvas Background. For gradient, enter alpha list separated by comma.
canvasBgRatio String Helps you specify canvas background ratio for gradients.
canvasBgAngle Number 0-360 Helps you specify canvas background angle in case of gradient.
canvasBorderColor Color Code Hex Code Lets you specify canvas border color.
canvasBorderThickness Number In pixels Lets you specify canvas border thickness.
canvasBorderAlpha Number 0-100 Lets you control transparency of canvas border.
ganttLineColor Color Code Hex Code Lets you specify the color in which the grid border for the Gantt pane view will be drawn.
ganttLineAlpha Number 0-100 Alpha for the grid border of Gantt view pane.
gridBorderColor Color Code Hex Code Color for the data grid border.
gridBorderAlpha Number 0 - 100 Alpha for the data grid border.
gridResizeBarColor Color Code Hex Code Color for the drag line that appears when resizing the data grid.
gridResizeBarThickness Number Thickness of the drag line that appears when resizing the data grid,
gridResizeBarAlpha Number 0-100 Alpha of the drag line that appears when resizing the data grid.
taskBarRoundRadius Number If you want your task bars to be rounded (when not using percent complete feature), you can set the radius of the round corner here. That'll result in all task bars having rounded corners.
taskBarFillMix String Gradient Formula This attribute lets you specify the gradient fill formula for the task bars.
taskBarFillRatio String of ratios separated by comma If you're using gradient fill formula for the task bars, this attribute lets you specify the ratio for each color in the gradient.
baseFont Font face name Global font face for all text on the chart. You can individually customize font properties of each element using their respective attributes or Styles.
baseFontSize Number Global font size for all text on the chart.
baseFontColor Color Code Hex Code Global font color for all text on the chart.
showShadow Boolean 0/1 Whether to apply the shadow effect for the task bars?
logoURL String You can load an external logo (JPEG/PNG) to your chart, this attribute lets you specify the URL. Due to cross domain security restrictions it is advised to use a logo from the same domain name as your charts.
logoPosition String 'TL', 'TR', 'BL', 'BR', 'CC' Where to position the logo on the chart: TL - Top-left TR - Top-right BR - Bottom right BL - Bottom left CC - Center of screen
logoAlpha Number 0-100 Once the logo has loaded on the chart, you can configure its opacity using this attribute.
logoScale Number 0-100 You can also change the size of externally loaded logo at run-time by specifying a value for this parameter.
logoLink String If you want to link the logo to an external URL, specify the link in this attribute. The link can be in FusionCharts link format, allowing you to link to new windows, pop-ups, frames etc.
manageResize
Since 3.2
Boolean 0/1 Setting this attribute to 1, you can allow the chart to automatically resize itself when the parent container of the chart is resized.
useEllipsesWhenOverflow
Since 3.2
Boolean 0/1 When enabled in AUTO mode, long data labels are truncated by adding ellipses to prevent them from overflowing the chart background. The default value is 1.
showHoverBand Boolean 0/1 Whether to show the vertical and horizontal hover band for both the `<categories>` and `<processes>` elements. This atrribute overrides the value of `showHoverEffect` attribute. This feature is supported by JavaScript Gantt chart only.
showHoverEffect Boolean 0/1 When set to 0, disables all the hover bands and hover effects all over the chart. The value of this attribute is overridden by the value of `showHoverBand`, `showProcessHoverBand` and `showCategoryHoverBand` attributes. This feature is supported by JavaScript Gantt chart only.
hoverBandColor Color Code Hex Code Lets you set the hover band color of both the `<categories>` and `<processes>` elements. This feature is supported by JavaScript Gantt chart only.
hoverBandAlpha Number 0-100 Lets you set the transparency of the hover band for both the `<categories>` and `<processes>` elements. This feature is supported by JavaScript Gantt chart only.
showCategoryHoverBand Boolean 0/1 Whether to show the vertical color band on mouse hover for `<categories>` element? The value of this attribute overrides the value `showHoverEffect` attribute. This feature is supported by JavaScript Gantt chart only.
categoryHoverBandColor Color Code Hex Code Lets you set the hover band color for multiple `<categories>` element. This feature is supported by JavaScript Gantt chart only.
categoryHoverBandAlpha Number 0-100 Lets you set the transparency of the hover band for multiple `<categories>` element. This feature is supported by JavaScript Gantt chart only.
showGanttPaneVerticalHoverBand Boolean 0/1 Whether to show the color band of Gantt pane on mouse hover for multiple `<categories>` element? The value of this attribute overrides the value `showHoverEffect` attribute. This feature is supported by JavaScript Gantt chart only.
showProcessHoverBand Boolean 0/1 Whether to show the horizontal hover band for `<processes>` element on mouse hover? The value of this attribute overrides the value `showHoverEffect` attribute. This feature is supported by JavaScript Gantt chart only.
processHoverBandColor Color code Hex code Lets you set the hover band color for all `<processes>` element. This feature is supported by JavaScript Gantt chart only.
processHoverBandAlpha Number 0-100 Lets you set the transparency of the hover band for all `<processes>` element. This feature is supported by JavaScript Gantt chart only.
showGanttPaneHorizontalHoverBand Boolean 0/1 Whether to show the hover bands for `<processes>` element of Gantt pane on mouse hover. The value of this attribute overrides the value `showHoverEffect` attribute. This feature is supported by JavaScript Gantt chart only.
showConnectorHoverEffect Boolean 0/1 Whether to display the mouse hover effect on connector lines. This feature is supported by JavaScript Gantt chart only.
connectorHoverColor Color Code Hex Code Lets you set the hover color of the connector lines. This feature is supported by JavaScript Gantt chart only.
connectorHoverAlpha Number 0-100 Lets you set the transparency of the hover color of the connector lines. This feature is supported by JavaScript Gantt chart only.
connectorHoverThickness Number Lets you set the thickness of the connector lines after the mouse cursor hover. This feature is supported by JavaScript Gantt chart only.
showTaskHoverEffect Boolean 0/1 Whether to use the mouse hover effect of task bars. This feature is supported by JavaScript Gantt chart only.
taskHoverFillColor Boolean 0/1 Lets you set the color of task fill on mouse hover. This feature is supported by JavaScript Gantt chart only.
taskHoverFillAlpha Boolean 0/1 Lets you set the transparency of the task fill on mouse hover. This feature is supported by JavaScript Gantt chart only.
slackHoverFillColor Number Lets you set the hover color of the task bar slack. This attribute is not applicable when `showSlackAsFill` is set to 0. This feature is supported by JavaScript Gantt chart only.
slackHoverFillAlpha Boolean 0/1 Lets you set the transparency of the hover color of the task bar slack fill. This attribute is not applicable when `showSlackAsFill` is set to 0. This feature is supported by JavaScript Gantt chart only.

Tool-tip Properties

These attributes let you configure tool-tip properties.

Name Type Range Description
showToolTip Boolean 0/1 Whether to show tooltip for the chart?
toolTipBgColor Color Code Hex Code Background color for the tooltip
toolTipColor Color Code Hex Code Font color for the tool-tip.
toolTipBorderColor Color Code Hex Code Border Color for the tooltip.
dateInToolTip Boolean 0/1 Whether to show starting and ending date for each task in tooltip?
showToolTipShadow Boolean 0/1 Whether to show shadow for tooltips.

Legend Properties

In Gantt chart, the series name of each data-set shows up in the legend of the chart. If you do not need the legend, you can opt to hide the same.

Also, the legend can be placed at the bottom of the chart or to the right of the chart.

These attributes let you configure the functional and cosmetic properties for the legend.

Name Type Range Description
showLegend Boolean 0/1 Whether to show legend for the chart?
legendCaption String Text caption for the legend.
legendBorderColor Color Code Hex Code Border Color for the legend.
legendBorderThickness Number Border thickness for the legend.
legendBorderAlpha Number 0-100 Border alpha for the legend.
legendBgColor Color Code Hex Code Background color for the legend.
legendBgAlpha Number 0-100 Background alpha for the legend.
legendShadow Boolean 0/1 Whether to show a shadow for legend?
legendAllowDrag Boolean 0/1 The legend can be made drag-able by setting this attribute to 1. End viewers of the chart can drag the legend around on the chart.
legendScrollBgColor Color Code Hex Code If you've too many items on the legend, a scroll bar shows up on the same. This attribute lets you configure the background color of the scroll bar.
reverseLegend Boolean 0/1 You can reverse the ordering of datasets in the legend by setting this attribute to 1.

Scroll-bar Properties

These attributes let you configure the scroll-bar.

Name Type Range Description
scrollColor Color Code Hex Code Color for the scroll bar.
scrollPadding Number In pixels Vertical padding between the scroll bar and chart canvas.
scrollHeight Number In pixels Height of scroll bar.
scrollBtnWidth Number In pixels Width of scroll buttons.
scrollBtnPadding Number In pixels Horizontal padding between the scroll bar and its buttons.

Chart Padding & Margins

FusionWidgets XT allows you to manually customize the padding of various elements on the chart to allow advanced manipulation and control over chart visualization. Padding in FusionWidgets XT is always defined in pixels, unless the attribute itself suggests some other scale (like plotSpacePercent).

You can also define the chart margins. Chart margins refer to the empty space left on the top, bottom, left, and right of the chart. That means, FusionWidgets XT will not plot anything in that space.

It is not necessary for you to specify any padding/margin values. FusionWidgets XT automatically assumes the best values for the same.

These attributes let you configure the functional and cosmetic properties of chart paddings and margins.

Name Type Range Description
chartLeftMargin Number In pixels Amount of empty space that you want to put on the left side of your chart. Nothing is rendered in this space.
chartRightMargin Number In pixels Amount of empty space that you want to put on the right side of your chart. Nothing is rendered in this space.
chartTopMargin Number In pixels Amount of empty space that you want to put on the top of your chart. Nothing is rendered in this space.
chartBottomMargin Number In pixels Amount of empty space that you want to put at the bottom of your chart. Nothing is rendered in this space.
taskDatePadding Number In pixels Horizontal padding between the task bars and start of date labels (if you've opted to show them for the chart).
captionPadding Number In pixels This attribute lets you control the space (in pixels) between the sub-caption and top of the chart canvas. If the sub-caption is not defined, it controls the space between caption and top of chart canvas. If neither caption, nor sub-caption is defined, this padding does not come into play.
legendPadding Number In pixels Padding of legend from bottom side of canvas.

<categories> element

Each <categories> element represents one visual timeline on the chart. The timeline divisions are controlled by child <category> elements of <categories> element.

The following attributes of <categories> element apply to all child <category> elements, unless explicitly specified for each <category> element.

Name Type Range Description
bgColor Color Code Hex Code Background color for each horizontal visual date line.
bgAlpha Number 0-100 Background alpha for each horizontal visual date line.
font Font Face Font for this category.
fontSize Number Font size for this category.
fontColor Color Code Hex Code Font color for this category.
isBold Boolean 0/1 Whether to render font as bold for this category?
isItalic Boolean 0/1 Whether to render font as italic for this category?
isUnderline Boolean 0/1 Whether to render font as underline for this category?
verticalPadding Number In pixels Vertical padding for the category line - both top & bottom.
align String 'left', 'center' or 'right' Horizontal alignment position of category labels.
vAlign String 'top', 'middle' or 'bottom' Vertical alignment position of category labels.
showHoverBand Boolean 0/1 Whether to show the color band on mouse hover. This feature is supported by JavaScript Gantt chart only.
showGanttPaneHoverBand Boolean 0/1 Whether to show the color band of Gantt pane on mouse hover. This feature is supported by JavaScript Gantt chart only.
hoverBandColor Color Code Hex Code When you hover the mouse cursor over any category, you'll see a colored band moving with the mouse. This attribute lets you set the hover color of that band. This feature is supported by JavaScript Gantt chart only.
hoverBandAlpha Number 0-100 Lets you set the transparency of the hover band. This feature is supported by JavaScript Gantt chart only.

<category> element

Each <category> element distributes the time line into visual divisions.

These attributes let you configure the <category> element.

Name Type Range Description
start Date/Time in the formats specified Start date/time for this category. Needs to be specified in the date/time formats for the chart.
end Date/Time in the formats specified End date/time for this category. Needs to be specified in the date/time formats for the chart.
bgColor Color Code Hex Code Background color for this category division.
bgAlpha Number 0-100 Background alpha for this category division.
label String Label for the category. You can specify any text label to be displayed as the category label.
link Link in FusionCharts format Each category label can be linked to an external URL. You need to provide the URL in FusionCharts Link format.
align String 'left', 'center' or 'right' Horizontal alignment position of the label.
vAlign String 'top', 'middle' or 'bottom' Vertical alignment position of the label.
isBold Boolean 0/1 Whether this label will appear as bold?
isItalic Boolean 0/1 Whether this label will appear as italic?
isUnderline Boolean 0/1 Whether this label will appear as underlined?
font Font face Font face for the label.
fontSize Font size Font size for the label.
fontColor Color Code Hex Code Font color for the label.
showHoverBand Boolean 0/1 Whether to show the color band on mouse hover. This feature is supported by JavaScript Gantt chart only.
showGanttPaneHoverBand Boolean 0/1 Whether to show the color band of Gantt pane on mouse hover. This feature is supported by JavaScript Gantt chart only.
hoverBandColor Color Code Hex Code When you hover the mouse cursor over any category, you'll see a colored band moving with the mouse. This attribute lets you set the hover color of that band. This feature is supported by JavaScript Gantt chart only.
hoverBandAlpha Number 0-100 Lets you set the transparency of the color band. This feature is supported by JavaScript Gantt chart only.

<processes> element

All the processes for the chart are grouped under the <processes> element. Each process is represented by an individual <process> element.

The following attributes of <processes> element let you collectively specify cosmetic properties for each <process> element. You can also over-ride these properties by specifying the same for each <process> element.

These attributes let you configure the <processes> element.

Name Type Range Description
positionInGrid String 'left' or 'right' Whether the process column appears as the left-most column of data grid or right-most?
width Number In pixels or in percent Width of the process column in data table. You can either specify it as exact pixels (e.g. 150 or 200) or in percentage (25% or 30%)
The processes column can have a header, whose properties can be customized using the attributes below.
headertext String Header label for the processes column in data table.
headerFont Font face Font for the process header
headerFontSize Number Font size for the process header
headerFontColor Color Code Hex Code Font color for the process header
headerIsBold Boolean 0/1 Whether process header should appear bold?
headerIsItalic Boolean 0/1 Whether process header should appear in italics?
headerIsUnderline Boolean 0/1 Whether process header should appear as underlined?
headerAlign String 'left', 'center' or 'right' Horizontal alignment position of the header label.
headerVAlign String 'top', 'middle' or 'bottom' Vertical alignment position of the header label.
headerBgColor Color Code Hex Code Background color of the process header.
headerBgAlpha Number 0-100 Background alpha of the process header.
The following properties allow you to collectively specify cosmetics for all <process> elements, which can further be specified for each <process> element.
bgColor Color Code Hex Code Background color for the process name column.
bgAlpha Number 0-100 Background alpha for the process name column.
font Font Face Font for process name.
fontSize Number Font size for process name.
fontColor Color Code Hex Code Font color for process name.
isBold Boolean 0/1 Whether to show process names in bold?
isItalic Boolean 0/1 Whether to show process names in italics?
isUnderline Boolean 0/1 Whether to show process names as underline?
align String 'left', 'center' or 'right' Horizontal alignment for all process names.
vAlign String 'top', 'middle' or 'bottom' Vertical alignment for all process names.
showHoverBand Boolean 0/1 Whether to show the color band on mouse hover. This feature is supported by JavaScript Gantt chart only.
showGanttPaneHoverBand Boolean 0/1 Whether to show the color band of Gantt pane on mouse hover. This feature is supported by JavaScript Gantt chart only.
hoverBandColor Color Code Hex Code When you hover the mouse cursor over any process, you'll see a colored band moving with the mouse. This attribute lets you set the hover color of that band. This feature is supported by JavaScript Gantt chart only.
hoverBandAlpha Number 0-100 Lets you set the transparency of the color band. This feature is supported by JavaScript Gantt chart only.

<process> element

Each <process> element represents one process on the Gantt chart. You can show team members, projects, or task list as a process - there's no restriction to that.

These attributes let you configure the <process> element.

Name Type Range Description
label String The label for the process.
link Link in FusionCharts format Each process label can be linked to external links. You can specify the link for each process in FusionCharts link format as value of this attribute.
id String String ID for the process. Each process needs to have a unique identifier to enable cross linking with tasks.
font Font face Font face for this process label.
fontColor Color Code Hex Code Font color for this process label.
fontSize Font Size Font size for this process label.
isBold Boolean 0/1 Whether to show this process name in bold?
isItalic Boolean 0/1 Whether to show this process name in italics?
isUnderline Boolean 0/1 Whether to show this process name as underline?
align String 'left', 'center' or 'right' Horizontal alignment position for the process name.
vAlign String 'top', 'middle' or 'bottom' Vertical alignment position for the process name.
bgColor Color Code Hex Code Background color for the process name.
bgAlpha Number 0-100 Background alpha for the process name.
showHoverBand Boolean 0/1 Whether to show the color band on mouse hover. This feature is supported by JavaScript Gantt chart only.
showGanttPaneHoverBand Boolean 0/1 Whether to show the color band of Gantt pane on mouse hover. This feature is supported by JavaScript Gantt chart only.
hoverBandColor Color Code Hex Code When you hover the mouse cursor over any process, you'll see a colored band moving with the mouse. This attribute lets you set the hover color of that band. This feature is supported by JavaScript Gantt chart only.
hoverBandAlpha Number 0-100 Lets you set the transparency of the color band. This feature is supported by JavaScript Gantt chart only.

<tasks> element

The <tasks> element groups all the tasks that we've to show in the chart. Each task is represented by a element which is a child of the <tasks> element.

These attributes let you configure the <tasks> element.

Name Type Range Description
showlabels Boolean 0/1 Whether to show the label for each task (if defined)?
showpercentlabel Boolean 0/1 If percent complete has been defined for each task, whether to show the same as part of label?
showstartdate Boolean 0/1 Whether to show start date for each task?
showenddate Boolean 0/1 Whether to show end date for each task?
font Font face Font for all the task labels.
fontcolor Color Code Hex Code Font color for all the task labels.
fontsize Number Font size for all the task labels.
color Color Code Hex Code Fill color for the task bars. This color is manipulated by the task fill gradient formula to attain the required gradient
alpha Number 0-100 Alpha for the task bar fill.
showborder Boolean 0/1 Whether to show border for task bars?
bordercolor Color Code Hex Code If border is to be shown for task bars, this attribute defines the color.
borderthickness Number If border is to be shown for task bars, this attribute defines the thickness.
borderalpha Number 0-100 If border is to be shown for task bars, this attribute defines the alpha.
showHoverEffect Boolean 0/1 Whether to use the mouse hover effect? This feature is supported by JavaScript Gantt chart only.
hoverFillColor Color Code Hex Code Lets you set the hover color of the task bars. This feature is supported by JavaScript Gantt chart only.
hoverFillAlpha Number 0-100 Lets you set the transparency of the hover color for the task bars. This feature is supported by JavaScript Gantt chart only.
slackFillColor Color Code Hex Code Lets you set the color of the task bar slack. This feature is supported by JavaScript Gantt chart only.
slackHoverFillColor Number Lets you set the hover color of the task bar slack fill. This feature is supported by JavaScript Gantt chart only.
slackHoverFillAlpha Boolean 0/1 Lets you set the transparency of the hover color of the task bar slack fill. This feature is supported by JavaScript Gantt chart only.

<task> element

Each <task> element represents a task bar on the chart.

These attributes let you configure the <task> element.

Name Type Range Description
start Date/time in the formats specified Start date for the task in the date/time formats specified in XML.
end Date in the formats specified End date for the task in the date/time formats specified in XML.
id String identifier Each task can have its own unique ID. It is used for linking connectors and milestones.
processId String identifier You can relate each task to its process using the process ID, which can be specified here.
label String String label for the task.
link Link in FusionCharts format Link for the task bar (in FusionCharts link format)
percentComplete Number Each task can be shown as incomplete task by specifying the percent completed here.
showAsGroup Boolean 0/1 Whether to render the task bar visually as a group?
animation Boolean 0/1 Whether to animate this particular bar?
font Font face Font for the task label.
fontColor Color Code Hex Code Font color for the task label.
fontSize Number Font size for the task label.
color Color Code Hex Code Fill color for the task bar. This color is manipulated by the task fill gradient formula to attain the required gradient
alpha Number 0-100 Fill alpha for the task bar.
showBorder Boolean 0/1 Whether to show border for the task bar?
borderColor Color Code Hex Code Border color for the task bar.
borderThickness Number Border thickness for the task bar.
borderAlpha Number 0-100 Border alpha for the task bar.
height Number In pixels or in percent Height for the task bar either in pixels (e.g., 30 or 25) or in percent (e.g., 25% or 50%)
topPadding Number In pixels or in percent Padding required at the top of the task bar either in pixels or in percent.
showLabel Boolean 0/1 Whether to show the label for this task bar?
showPercentLabel Boolean 0/1 Whether to include percent complete in the label for this task bar?
showStartDate Boolean 0/1 Whether to show start date for the task bar?
showEndDate Boolean 0/1 Whether to show end date label for the task bar?
toolText String If you want to have custom tool text for each task bar, you can specify it here.
showHoverEffect Boolean 0/1 Whether to use the mouse hover effect? This feature is supported by JavaScript Gantt chart only.
hoverFillColor Color Code Hex Code Lets you set the hover color of individual task bar. This feature is supported by JavaScript Gantt chart only.
hoverFillAlpha Number 0-100 Lets you set the transparency of the hover color for individual task bar. This feature is supported by JavaScript Gantt chart only.
slackHoverFillColor Number Lets you set the hover color of slack fill for individual task bar. This feature is supported by JavaScript Gantt chart only.
slackHoverFillAlpha Boolean 0/1 Lets you set the transparency of the hover color of slack fill for individual task bar. This feature is supported by JavaScript Gantt chart only.

<datatable> element

The following attributes of <datatable> element help you collectively control the cosmetics of each cell within the table. You can, however, control the properties of individual cells using attributes of <datacolumn> element or individual <text> element.

These attributes let you configure the <datatable> element.

Name Type Range Description
headerFont Font face Font face for all column headers in the data table.
headerFontSize Number Font size for all column headers in the data table.
headerFontColor Color Code Hex Code Font color for all column headers in the data table.
headerIsBold Boolean 0/1 Whether header should appear bold for all column headers in the data table?
headerIsItalic Boolean 0/1 Whether header should appear in italics for all column headers in the data table?
headerIsUnderline Boolean 0/1 Whether header should appear in underline for all column headers in the data table?
headerAlign String 'left', 'center' or 'right' Horizontal alignment position for all column headers in the data table.
headerVAlign String 'top', 'middle' or 'bottom' Vertical alignment position for all column headers in the data table.
headerBgColor Color Code Hex Code Background color for all column headers in the data table.
headerBgAlpha Number 0-100 Background alpha for all column headers in the data table.
The following attributes let you collectively specify the cosmetic properties for all the cells in data table.
bgColor Color Code Hex Code Background color for all the cells in the data table.
bgAlpha Number 0-100 Background alpha for all the cells in the data table.
font Font face Font for all the cells in the data table.
fontColor Color Code Hex Code Font color for all the cells in the data table.
fontSize Number Font size for all the cells in the data table.
isBold Boolean 0/1 Whether to show text in bold for all the cells in the data table?
isItalic Boolean 0/1 Whether to show text in italics for all the cells in the data table?
isUnderline Boolean 0/1 Whether to show text as underline for all the cells in the data table?
align String 'left', 'center' or 'right' Horizontal alignment position for all the cells in the data table.
vAlign String 'top', 'middle' or 'bottom' Vertical alignment position for all the cells in the data table.

<datacolumn> element

Each <datacolumn> element adds a column to the chart's data grid.

These attributes let you configure the <datacolumn> element.

Name Type Range Description
headerText String Label for the header.
headerLink Link in FusionCharts format Link for the header.
headerFont Font face Font face for the column header.
headerFontSize Number Font size for the column header.
headerFontColor Color Code Font color for the column header.
headerIsBold Boolean 0/1 Whether header should appear bold for the column header?
headerIsItalic Boolean 0/1 Whether header should appear in italics for the column header?
headerIsUnderline Boolean 0/1 Whether header should appear in underline the column header?
headerAlign String 'left', 'center' or 'right' Horizontal alignment position for the column header.
headerVAlign String 'top', 'middle' or 'bottom' Vertical alignment position for the column header.
headerBgColor Color Code Hex Code Background color for the column header.
headerBgAlpha Number 0-100 Background alpha for the column header.
The following attributes let you collectively specify the cosmetic properties for all the cells in this column.
width Number In pixels or in percent Width of this column in number (100 or 200) or percent (25% or 45%)
bgColor Color Code Hex Code Background color for all the cells in this data column.
bgAlpha Number 0-100 Background alpha for all the cells in this data column.
font Font face Font for all the cells in this data column.
fontColor Color Code Hex Code Font color for all the cells in this data column.
fontSize Number Font size for all the cells in this data column.
isBold Boolean 0/1 Whether to show text in bold for all the cells in this data column?
isItalic Boolean 0/1 Whether to show text in italics for all the cells in this data column?
isUnderline Boolean 0/1 Whether to show text as underline for all the cells in this data column?
align String 'left', 'center' or 'right' Horizontal alignment position for all the cells in this data column.
vAlign String 'top', 'middle' or 'bottom' Vertical alignment position for all the cells in this data column.

<text> element

Each <text> element, child of <datacolumn> element, represents a single cell in the data column.

These attributes let you configure the <text> element.

Name Type Range Description
label String String label to be displayed in the cell.
link Link in FusionCharts format Link for the label.
bgColor Color Code Hex Code Background color for the cell.
bgAlpha Number 0-100 Background alpha for the cell.
font Font face Font for the cell.
fontColor Color Code Hex Code Font color for the cell.
fontSize Number Font size for the cell.
isBold Boolean 0/1 Whether to show text in bold?
isItalic Boolean 0/1 Whether to show text in italics?
isUnderline Boolean 0/1 Whether to show text as underline?
align String 'left', 'center' or 'right' Horizontal alignment position of the label.
vAlign String 'top', 'middle' or 'bottom' Vertical alignment position of the label.

<connectors> element

These attributes let you configure the cosmetics for all the connectors collectively.

Name Type Range Description
color Color Code Hex Code Color for the connector line
alpha Number 0-100 Alpha of the connector lines.
thickness Number Thickness of the connector lines.
isDashed Boolean 0/1 Whether to plot the lines as dash?
hoverColor Color Code Hex Code Lets you set the hover color of the connector lines. This feature is supported by JavaScript Gantt chart only.
hoverAlpha Number 0-100 Lets you set the transparency of the hover color for the connector lines. This feature is supported by JavaScript Gantt chart only.
hoverThickness Number Lets you set the thickness of the hover effect for the connector lines. This feature is supported by JavaScript Gantt chart only.
showHoverEffect Boolean 0/1 Whether to use the mouse hover effect? This feature is supported by JavaScript Gantt chart only.

<connector> element

Each <connector> element represents a connector that connects two tasks.

These attributes let you configure the cosmetics for each connector individually.

Name Type Range Description
fromTaskId String ID ID of the task which will act as the starting point for connector. You'll need to define IDs for each task before you can define connectors.
toTaskId String ID ID of the task which will act as the ending point for connector.
fromTaskConnectStart Boolean 0/1 Whether to connect left side of the starting task bar?
toTaskConnectStart Boolean 0/1 Whether to connect left side of the ending task bar?
color Color Code Hex Code Color of the connector
thickness Number Thickness of the connector.
alpha Number 0-100 Alpha of the connector line.
isDashed Boolean 0/1 Whether to show connector line as dashed?
hoverColor Color Code Hex Code Lets you set the hover color of individual connector line. This feature is supported by JavaScript Gantt chart only.
hoverAlpha Number 0-100 Lets you set the transparency of the hover color for individual connector line. This feature is supported by JavaScript Gantt chart only.
hoverThickness Number Lets you set the thickness of the hover effect of individual connector line. This feature is supported by JavaScript Gantt chart only.
showHoverEffect Boolean 0/1 Whether to use the mouse hover effect? This feature is supported by JavaScript Gantt chart only.
Link String Lets you set links for individual connector items. This feature is supported by JavaScript Gantt chart only.

<milestones> --> <milestone> element

These attributes let you visually depict any crucial dates on the chart. You can create your own milestones on the chart based on date and task i.e., for a given task you can specify milestones on specific dates. You can also add tool text and link for the milestone. You can customize all the visual properties of the milestone including shape (star or polygon), size, and colors.

These attributes let you configure the <milestone> element of the <milestones> element.

Name Type Range Description
date Date Date for the milestone in the specified date format.
taskId String ID ID of the task to which this milestone relates to. You must define task IDs before you can use milestones.
shape star or polygon Shape of the milestone.
numSides Number 3-15 Number of sides that the milestone should have.
startAngle Number 0-360 Starting angle for the star/polygon.
radius Number 2-15 Radius for the milestone (in pixels).
color Color Code Hex Code Color for the milestone
alpha Number 0-100 Alpha for the milestone.
borderColor Color Code Hex Code Border color for the milestone.
borderThickness Number Border thickness for the milestone.
link Link in FusionCharts format Each milestone can be linked to external links. The link should be specified in FusionCharts link format.
toolText String Each milestone can have its own tool text, which you can specify here.

<trendLines> --> <Line> element

Using the <trendlines> element (and children <line> elements), you can define trend lines on the chart.

Trend lines are horizontal lines spanning the chart canvas which aid in interpretation of data with respect to some pre-determined value. For example, if you are plotting sales data of current year, you might want to add previous year's average monthly sales as trend indicator for ease of comparison.

Use the code snippet shown below to render a trend-line on the chart:

    "trendlines": [{
     "line": [{
                "startvalue": "177500",
                 "color": "#9b59b6",
                 "displayvalue": "Target"
             }]
                    }]

These attributes let you configure the trendline cosmetic and functional properties.

Name Type Range Description
start Date/Time in the formats specified Start date/time for the trend line/zone.
end Date/Time in the formats specified End date for the trend line/zone. If you intend to draw a trend line instead of a trend zone, then you do not need to specify a value for this attribute.
color Color Code Hex Code Color for the trend line/zone
displayValue String If you want to display your custom value beneath the trend line, you can do so here. Example, you can show the trend line and label it as "Today".
thickness Number Thickness of the trend line.
isTrendZone Boolean 0/1 Whether the trend will be displayed as a line or a zone (fill-colored rectangle).
alpha Number 0-100 Alpha of the trend line.
dashed Boolean 0/1 Whether to show the trend line as dashed?
dashLen Number 1-10 If it is to be shown as dashed, this attribute lets you define the length of each dash.
dashGap Number 1-10 If it is to be shown as dashed, this attribute lets you define the length of each dash gap.

<legend> element --> <item> element

These attributes let you configure the label and color for the <item> element of the <legend> element.

Name Type Range Description
label String Label for the legend item.
color Color Code Hex Code Color code for the legend item