Trend-lines and trend-zones are used to represent a target value and a target range, respectively. You can add them to your Gantt chart to mark an event for a particular data - for example, you can add a trend-line to indicate "Testing Start" or a trend-zone to show the Christmas vacation period.
In this section, you will be shown how you can:
Create a trend-line
Create a trend-zone
Creating a Trend-line
As an example, we will create a trend line showing "Testing Start" in the "Social Media Optimization" Gantt chart.
A Gantt chart rendered with a trend-line looks like this:
Given below is a brief description of the attributes used to create a trend-line:
| Attribute Name | Description |
|---|---|
start |
It is used to specify the start date for the trend-line. |
displayValue |
It is used to specify the label for the trend-line. |
color |
It is used to specify the hex code of the color that will be used to render the trend-line. |
thickness |
It is used to specify the thickness for the trend-line. |
dashed |
It is used to specify whether the trend-line will be rendered as a dashed line. Setting this attribute to 1 will render the trend-line as dashed line, setting it to 0 (default) will render a whole line. |
These attributes belong to the line object, which in turn belongs to the trendlines object.
The data structure needed to create a trend-line is given below:
Creating Trend-zones
As an example, we will create a trend-zone in the "Social Media Optimization" Gantt chart to represent the block of dates for the Christmas vacation.
A Gantt chart rendered with a trend-zone looks like this:
Given below is a brief description of the attributes used to render a trend-zone:
| Attribute Name | Description |
|---|---|
isTrendZone |
It is used to specify whether a trend-zone or a trend-line will be rendered. Setting this attribute to 1 renders a trend-zone, setting it to 0 (default) renders a trend-line. |
start |
It is used to specify the start date for the trend-zone. |
end |
It is used to specify the end date for the trend-zone. |
displayValue |
It is used to specify the label for the trend-zone. |
color |
It is used to specify the hex code of the color that will be used to render the trend-line. |
alpha |
It is used to specify the transparency for the trend-zone. |
These attributes belong to the line object, which in turn belongs to the trendlines object.
The data structure needed to create a trend-zone is given below:
There! You have now seen how you can create trend-lines and trend-zones for a Gantt chart.