You can configure several cosmetic properties for a Gantt chart that help you improve the visual representation of your chart.
In this section, you will be shown how you can:
Define and show/hide task labels
Show/hide task start and end dates
Add and customize process headers
Add more columns to the data table
Configure hover effects
Defining and Showing/Hiding Task Labels
A Gantt chart with task labels defined and shown looks like this:
Given below is a brief description of the attributes used to define and set the visibility of the task labels:
| Attribute Name | Description |
|---|---|
showTaskLabels |
This attribute belongs to the chart object and is applicable to all tasks defined under all the tasks objects in the JSON data. It is used to specify whether task labels will be rendered on the chart. Setting this attribute to 1 will show task labels, setting it to 0 (default) will hide them. |
showLabels |
This attribute belongs to the tasks object and is applicable only to the tasks object for which it is defined. It is used to specify whether task labels will be rendered on the chart. Setting this attribute to 1 will show task labels, setting it to 0 (default) will hide them. |
showLabel |
It is used to specify whether task labels will be rendered on the chart. Setting this attribute to 1 will show task labels, setting it to 0 (default) will hide them. This attribute belongs to the task object and is applicable only to the task object for which it is defined. |
label |
It is used to specify the label for the task, e.g. Promotion Applications. |
The data structure needed to define and set the visibility of task labels is given below:
Showing/Hiding Task Start and End Dates
A Gantt chart that demonstrates how you can show and hide task start and end dates looks like this:
Given below is a brief description of the attributes used to show/hide task start and end dates:
| Attribute Name | Description |
|---|---|
showTaskStartDate |
It is used to specify whether the task start date will be shown with the task bar. Setting this attribute to 1 will show the start date, setting it to 0 (default) will hide it. The start date is rendered to the left of the task bar. This attribute belongs to the charts object and is applicable to all the tasks defined using all the tasks object in the JSON data. |
showTaskEndDate |
It is used to specify whether the task end date will be shown with the task bar. Setting this attribute to 1 will show the end date, setting it to 0 (default) will hide it. The end date is rendered to the right of the task bar. This attribute belongs to the charts object and is applicable to all the tasks defined using all the tasks object in the JSON data. |
showStartDate |
It is used to specify whether the task start date will be shown with the task bar. Setting this attribute to 1 will show the start date, setting it to 0 (default) will hide it. The start date is rendered to the left of the task bar. This attribute belongs to the task object and is applicable to only the specific object defined using the task object in the JSON data. |
showEndDate |
It is used to specify whether the task end date will be shown with the task bar. Setting this attribute to 1 will show the end date, setting it to 0 (default) will hide it. The end date is rendered to the right of the task bar. This attribute belongs to the task object and is applicable to only the specific object defined using the task object in the JSON data. |
The data structure needed to show/hide task start and end dates is given below:
Adding and Customizing the Process Header
A Gantt chart with a process header defined and customized looks like this:
Given below is a brief description of the attributes used to add and customize process headers:
| Attribute Name | Description |
|---|---|
headerText |
It is used to specify the text for the header. e.g. "What to do?" |
headerAlign |
It is used to specify the horizontal alignment for the column header. This attribute takes the values left, center, and right. |
headerVAlign |
It is used to specify the vertical alignment for the column header. This attribute takes the values top, middle, and bottom. |
headerFont |
It is used to specify the font family to render the process header, e.g. Times New Roman. |
headerFontSize |
It is used to specify the font size for the process header, e.g. 72. |
headerFontColor |
It is used to specify the hex code for the font color of the process header, e.g. #ACD34E. |
headerIsBold |
It is used to specify whether bold formatting should be applied to the process header. Setting this attribute to 1 applies bold formatting, setting it to 0 (default) does not apply it. |
headerIsItalic |
It is used to specify whether process header should be italicized. Setting this attribute to 1 will italicize the header, setting it to 0 (default) will not. |
headerIsUnderline |
It is used to specify whether the process header should be underlined. Setting this attribute to 1 will underline the header, setting it 0 (default) will not. |
The data structure needed to add and customize the process header is given below:
Adding More Columns to the Data Table
The Social Media Optimization Gantt chart that we have been looking at so far looks like this:
The above Gantt chart rendered with an additional "Owner" column looks like this:
The data structure needed to add more columns to the Gantt chart is given below:
Because the chart width is relatively small here, a scroll bar comes up and allows the users to scroll through the data table. You can increase the width of data table by:
Either increasing the chart width
Or, by setting
ganttWidthPercentinchartobject to a lower value (0-100). This attribute indicates the percent space (width) the Gantt pane takes.
You can also explicitly set the width of each data column using the width attribute of the datacolumn object. This can be set as a pixel value or as a percentage of the entire data grid width.
If you wish to hide the scroll bar of the data column, you can set showFullDataTable to 0 (false) in chart object. This will wrap & truncate the data labels and try to squeeze them in the required space (only if possible).
Customizing the Hover Effect
In a Gantt chart, the hover effect is rendered as a vertical/horizontal band when the mouse pointer is hovered over a category/process header. Different ways in which you can customize the hover effect for a Gantt chart are:
Customize the hover effect globally
Customize the hover effect for processes
Customize the hover effect for categories
Disable the hover effect
Customizing the Hovering Effect Globally
A Gantt chart with the hover effect customized globally looks like this:
Given below is a brief description of the attributes used to customize the hover effect globally.
| Attribute Name | Description |
|---|---|
hoverBandColor |
It is used to specify the hex code for the hover band color of the categories and processes objects, e.g. #ABCDEF. |
hoverBandAlpha |
It is used to specify the transparency for the hover band of the categories and processes objects. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 70. |
The data structure needed to customize the hover effect globally is given below:
Customizing Hover Effect for Processes
A Gantt chart with the hover effect customized for all processes looks like this:
Given below is a brief description of the attributes used to customize the hover effect for processes:
| Attribute Name | Description |
|---|---|
processHoverBandColor |
It is used to specify the hex code of the hover band color for all processes, e.g. #AA11A1. This attribute belongs to the chart object and is applicable to all processes created using all the processes objects in the JSON data. |
processHoverBandAlpha |
It is used to specify the transparency of the hover band color for all processes. This attribute takes values between 0 and 100, e.g. 50. This attribute belongs to the chart object and is applicable to all processes created using all the processes objects in the JSON data. |
hoverBandColor |
It is used to specify the hex code of the hover band color for all processes, e.g. #AD34A1. This attribute, when used with the processes object, is applicable to all the processes created under the object. When used with the process object, it is applicable to only one process created using this object. |
hoverBandAlpha |
It is used to specify the transparency of the hover band color for all processes. This attribute takes values between 0 and 100, e.g. 75. This attribute, when used with the processes object, is applicable to all the processes created under the object. When used with the process object, it is applicable to only one process created using this object. |
The data structure needed to customize the hover effect for all processes is given below:
Customizing the Hover Effect for Categories
A Gantt chart customized for the hover effect for categories looks like this:
Given below is a brief description of the attributes used to customize the hover effect for categories:
| Attribute Name | Description |
|---|---|
categoryHoverBandColor |
It is used to specify the hex code of the hover band color for all categories, e.g. #AA11A1. This attribute belongs to the chart object and is applicable to all categories created using all the categories objects in the JSON data. |
categoryHoverBandAlpha |
It is used to specify the transparency of the hover band color for all categories . This attribute takes values between 0 and 100, e.g. 50. This attribute belongs to the chart object and is applicable to all categories created using all the categories objects in the JSON data. |
hoverBandcolor |
It is used to specify the hex code of the hover band color for all categories, e.g. #AD34A1. This attribute, when used with the categories object, is applicable to all the categories created under the object. When used with the category object, it is applicable to only one category created using this object. |
hoverBandAlpha |
It is used to specify the transparency of the hover band color for all categories. This attribute takes values between 0 and 100, e.g. 75. This attribute, when used with the categories object, is applicable to all the categories created under the object. When used with the category object, it is applicable to only one category created using this object. |
The data structure needed to customize the hover effect for categories is given below:
Disabling Hover Effects
Given below is a brief description of the attributes used to disable the hover effect:
| Attribute Name | Description |
|---|---|
showHoverEffect |
It is used to specify whether the hover effect will be enabled for the Gantt chart. Setting this attribute to 0 disables the hover effect, setting it to 1 (default) enables it. To disable hover effects for all categories, processes, tasks, and connectors on the chart, set "showHoverEffect": "0" with the chart object. Similarly, to disable the hover effect for one or multiple categories/processes, use this attribute with their respective objects. |
showHoverBand |
It is used to specify whether the hover effect will be enabled for the color bands. Setting this attribute to 0 will disable the hover effect, setting it to 1 (default) will enable it. This attribute is used when you want to enable the hover effects for the categories and processes only and disable the hover effects for tasks and connectors |
There! You have now seen how you can configure the various cosmetic properties of a Gantt chart.