There are various ways in which you can customize the way your task bars render on the chart.
In this section, you will be shown how you can:
Create task bars indicating percentage of task completed
Customize hover effects for task bars
Create task bars that look like a task group
Draw task bars with rounded corners
Customize the tool text for each task
Creating Task Bars to Indicate Percent Complete Figures
You can have task bars on your chart that tell you what percentage of a task has been completed.
A Gantt chart rendered with task bars indicating percent complete figures looks like this:
Given below is a brief description of the attributes used to render percent complete task bars:
| Attribute Name | Description |
|---|---|
percentComplete |
It is used to specify what percentage of a task has been completed. This attribute takes values between 0 and 100. It belongs to the task object, which in turn belongs to the tasks object. The portion of the task that is yet to be completed is called the slack. |
slackFillColor |
It is used to specify the hex code of the color that will be used to render the slack, e.g. #432ACD. By default, the slack is rendered in a shade of red. This attribute belongs to the chart object. |
showSlackAsFill |
It is used to specify if the slack will be rendered as a filled bar or as an empty bar. Setting this attribute to 0 will render the slack as an empty bar, setting it to 1 (default) will render it as a filled bar. This attribute belongs to the chart object. |
The data structure needed to create task bars indicating percent complete figures is given below:
Customizing the Hover Effect for Tasks
By default, hover effects are enabled for Gantt charts. You can further customize the hover effect for the color and transparency.
A Gantt chart with the hover effect for the tasks customized looks like this:
Given below is a brief description of the attributes used to customize the hover effect for tasks:
| Attribute Name | Description |
|---|---|
taskHoverFillColor |
It is used to specify the hex code of the task bar fill color when the mouse pointer is hovered over it, e.g. #444444. This attribute belongs to the chart object and is applicable to all tasks created in the JSON data. |
taskHoverFillAlpha |
It is used to specify the transparency of the task bar fill color when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 40. It belongs to the chart object and is applicable to all tasks created in the JSON data. |
hoverFillColor |
It is used to specify the hex code of the task bar fill color when the mouse pointer is hovered over it, e.g. #444444. This attribute, when used with the tasks object, is applicable to all the tasks created under the object. When used with the task object, it is applicable to only one task created using this object. |
hoverFillAlpha |
It is used to specify the transparency the task bar fill color when the mouse pointer is hovered over it. It takes values between 0 (transparent) and 100 (opaque), e.g. 40. This attribute, when used with the tasks object, is applicable to all the tasks created under the object. When used with the task object, it is applicable to only one task created using this object. |
showHoverEffect |
It is used to specify whether the hover effect will be enabled or disabled for all the elements on the chart. Setting this attribute to 0 will disable the hover effect, setting it to 1 (default) will enable it. |
showTaskHoverEffect |
It is used to specify whether the hover effect will be enabled or disabled for all the tasks on the chart. Setting this attribute to 0 will disable the hover effect, setting it to 1 (default) will enable it. |
The data structure needed to customize the hover effect for the tasks is given below:
Customizing Hover Effect for Slacks
A Gantt chart with the hover effect customized for slacks looks like this:
Given below is a brief description of the attributes used to customize the hover effect for slacks:
| Attribute Name | Description |
|---|---|
slackHoverFillColor |
It is used to specify the hex code of the task bar fill color when the mouse pointer is hovered over it, e.g. #444444. This attribute can be used with the chart, tasks, and task objects. |
slackHoverFillAlpha |
It is used to specify the transparency the task bar fill color when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 40. It can be used with the chart, tasks, and task objects. |
The data structure needed to customize hover effects for slacks is given below:
Creating Task Bars that Look like Task Groups
A Gantt chart with task bars presented as task groups looks like this:
Given below is a brief description of the attributes used to represent a task as a parent group visually:
| Attribute Name | Description |
|---|---|
showAsGroup |
It is used to specify whether the task bars should be rendered as a task group. Setting this attribute to 1 will render the task bars as task groups, setting it to 0 (default) will not. |
The data structure needed to create task bars that appear as task groups is given below:
Drawing Task Bars with Rounded Corners
A Gantt chart having task bars with rounded corners looks like this:
Given below is a brief description of the attributes used to render task bars with rounded corners:
| Attribute Name | Description |
|---|---|
taskBarRoundRadius |
It is used to specify the radius for the rounded corners of task bars. |
The data structure needed to render task bars with rounded corners is given below:
Customizing Tool Text for Task Bars
FusionCharts Suite XT v3.4 allows you to add custom tool text for the task bars in a Gantt chart using attributes and macros.
A Gantt chart rendered with a custom tool text (using attributes and macros) for task bars is given below:
Given below is a brief description of the attributes used to render a custom tool text:
| Attribute Name | Description |
|---|---|
dateInToolTip |
It is used to specify whether the date should be rendered as a part of the tool-tip text. Setting this attribute to 1 will render the date in the tool-tip text, setting it to 0 will not render the date. |
plotToolText |
If you want to have custom tool text for each task bar, you can specify it here. |
Macros in Tool-tip Variables
Starting FusionCharts Suite XT v3.4, we can add macros to configure dynamic and contextual content in tooltip. This saves a lot of manual effort and provides for a lot of customization options.
Given below is a brief description of the attribute used to support Gantt chart-specific macros:
| Attribute Name | Description |
|---|---|
milestoneToolText |
It is used to set to specify the tool-text for milestones. |
Given below is a brief description of the Gantt chart-specific macros:
| Macro Name | Description |
|---|---|
$start |
It is used to specify the start time of a task. |
$end |
It is used to specify the end time of a task. |
$processName |
It is used to specify the corresponding process name of a task. |
$label |
It is used to specify the label of a task. |
$percentComplete |
It is used to specify the percentage of task completed (if provided). |
$date |
It is used to specify the milestone date. |
$taskStartDate |
It is used to specify the start date of the task that corresponds to the milestone. |
$taskEndDate |
It is used to specify the end date of the task that corresponds to the milestone. |
$taskLabel |
It is used to specify the label of the task that corresponds to the milestone. |
$taskPercentComplete |
It is used to specify the percentage completion (if provided) of the task that corresponds to the milestone. |
$processName |
It is used to specify the name of the process that corresponds to the milestone. |
The data structure needed to render a Gantt chart with custom tool text for the task bars is given below:
There! You have now seen the various ways in which you can configure your task bars.