Timeline Plot Elements
- Overview
- Days Off and Non Working Time Coloring
- Project Start/End Marker, Today Marker
- Row Height and Bars Height
- Horizontal Grid
- Vertical Grid
- Background and Border
Overview
Timeline Plot - is an are where Gantt Chart itself is displayed. Besides tasks, periods and connectors this area can contain several decorative elements and several functional.
This illustration highlight almost all major timeline plot elements, and this tutorial will describe how each element is configured:

Days Off and Non Working Time Coloring
AnyGantt allows to show days off and non-working time. Both days and time should be defined in a project calender - see Calendar tutorial for more.
In this section questions of this areas coloring is covered.
By default non working days coloring is turned off, to enable it you should set the following:
<timeline>
<plot>
<non_working_days show="true" />
</plot>
</timeline>
</anygantt>
When coloring is enabled all days off are colored. You can change this coloring, which can be either solid or gradient. Sample XML shows how this color is configured:
<timeline>
<plot>
<non_working_days show="true">
<fill enabled="true" type="Solid" color="#FF0000" opacity="0.3" />
</non_working_days>
</plot>
</timeline>
</anygantt>
See details about fill in XML Reference.
Non Working Time coloring is turned off by default too. To turn it on set:
<timeline>
<plot>
<non_working_hours show="true" />
</plot>
</timeline>
</anygantt>
When coloring is enabled all non working hours are colored. You can change this coloring, which can be either solid or gradient. Sample XML shows how this color is configured:
<timeline>
<plot>
<non_working_hours show="true">
<fill enabled="true" type="Solid" color="#00FF00" opacity="0.3" />
</non_working_hours>
</plot>
</timeline>
</anygantt>
See details about fill in XML Reference.
Project Start/End Marker, Today Marker
There are three special markers on timeline plot:
- Start of Project Marker
- End of Project Marker
- Current Time Marker
All these markers are lines drawn vertically through all plot, they have similar settings and have both automatic (date and time is calculated automatically) and manual (set date and time in XML) modes.
XML Below shows how to enable all three markers. Each marker is defined in appropriate node: <project_start>, <project_end> and <current_time>:
<timeline>
<plot>
<project_start show="true" mode="Auto">
<line enabled="true" color="DarkRed" thickness="2" />
</project_start>
<project_end show="true" mode="Auto">
<line enabled="true" color="DarkRed" thickness="2" />
</project_end>
<current_time show="true" mode="Auto">
<line enabled="true" color="Green" thickness="2" />
</current_time>
</plot>
</timeline>
</anygantt>
As you can see configurattion is all the same, only node names are different. To enable markers show attribute is set to True. Position for all markers are calculated autmatically, with Auto mode set in mode attribute.
Automatic mode calculates the position in a following way:
- Project Start - starting date time for the earliest task or period.
- Project End - ending date time of the latest task or period.
- Current Time - system date time on client PC (PC where Flash Player that plays AnyGantt.swf runs)
Live sample for all three markers in automatic mode:
![]() |
As you can see start and end project markers are shown as they should, and current date marker is shown on the right side of the time plot - it happend because your PC local time doesn't fit into project time span. Please make sure that automatic mode is what you need before using it.
To set the positions of all markers manually choose Custom mode. XML below shows how all markers can be placed to the certain position:
<timeline>
<plot>
<project_start show="true" mode="Custom" date="2008.07.01 00:00">
<line enabled="true" color="DarkRed" thickness="2" />
</project_start>
<project_end show="true" mode="Custom" date="2008.07.20 00:00">
<line enabled="true" color="DarkRed" thickness="2" />
</project_end>
<current_time show="true" mode="Custom" date="2008.07.13 16:45">
<line enabled="true" color="Green" thickness="2" />
</current_time>
</plot>
</timeline>
</anygantt>
As you can see - all you need to do is to set mode to "Custom" and set desired date and time in date attribute.
In custom mode you can place markers to any position on the time plot and use them in any way, for example to show critical deadlines or other.
Here is a live sample with markers set manually:
![]() |
Row Height and Bars Height
By default AnyGantt uses relatively small row height to display tasks and resource, you can tune this if you'd like to use a larger font or place more detailed labels in the plot, or make a Gantt chart more accessible.
There are several options that allow you to manipulate row height and tasks or periods height:
<timeline>
<plot line_height="60" item_height="40" item_padding="10" />
</timeline>
</anygantt>
All these options are set in <plot> node:
Attribute | Description |
---|---|
line_height | Sets the row height in pixels, it is used both in data grid and on time line plot. |
item_height | Sets the height in pixels of the task or period displayed on the time plot. |
item_padding | Sets the padding between the bar and the borders of the roe. |
Sample chart that has these parameters tuned:
![]() |
Horizontal Grid
Horizontal grid is intended to allow user to see easily the correspondense between task names (resource names) in grid and task bars (resource periods) on the plot.
Horizontal Grid consists of two elements:
- Rows Separator Lines
- Interlaced Row Fill
Here is a sample configuration XML:
<timeline>
<plot>
<grid>
<horizontal>
<line enabled="true" color="DarkSeaGreen" thickness="1" />
<even>
<fill enabled="true" color="DarkSeaGreen" opacity="0.2" />
</even>
<odd>
<fill enabled="true" color="White" opacity="1" />
</odd>
</horizontal>
</grid>
</plot>
</timeline>
</anygantt>
Rows Separator Lines are configured in <line> node, and interlaced fill in configured in <even> and <odd> nodes with a help of <fill> node .
Take a look at the live sample with tuned Horizontal Grid:
![]() |
You can disable any element in the grid by setting enabled to False where needed. Here is a sample that turns off all elements of the grid:
<timeline>
<plot>
<grid>
<horizontal>
<line enabled="false" />
<even>
<fill enabled="false" />
</even>
<odd>
<fill enabled="false" />
</odd>
</horizontal>
</grid>
</plot>
</timeline>
</anygantt>
This section doesn't cover all configuration options available for line and fill, please see XML Reference for the details.
Please note that Plot Grid Settings DO NOT affect Data Grid rows. See Data Grid tutorials to learn about data grid rows.
Vertical Grid
Vertical Grid, just as Horizontal one, is used to imrpve reability of the chart. Vertical grid divides Major Units of the time scale (the top line in time scale).
Vertical Grid consists of two elements:
- Major Units Separator Lines
- Interlaced Column Fill
Here is a sample that shows these elements configuration :
<timeline>
<plot>
<grid>
<vertical>
<line enabled="true" color="DarkSeaGreen" thickness="1" />
<even>
<fill enabled="true" color="DarkSeaGreen" opacity="0.2" />
</even>
<odd>
<fill enabled="true" color="White" opacity="1" />
</odd>
</vertical>
</grid>
</plot>
</timeline>
</anygantt>
Separator Lines are configured in <line> node, and interlaced fill - in <even> and <odd> nodes with a help of <fill>.
Here is a sample of configured Vertical Grid. Pleae note that Horizontal Grid always Overlays Vertical. That is why it horizontal grid if turned off in this sample:
![]() |
You can disable any element in the grid by setting enabled to False where needed. Here is a sample that turns off all elements of the grid:
<timeline>
<plot>
<grid>
<vertical>
<line enabled="false" />
<even>
<fill enabled="false" />
</even>
<odd>
<fill enabled="false" />
</odd>
</vertical>
</grid>
</plot>
</timeline>
</anygantt>
This section doesn't cover all configuration options available for line and fill, please see XML Reference for the details.
Background and Border
Time Plot has its own fill and border, but by default interlaced fill of horizontal grid is turned on and you can't see plot fill. If you turn off grid fill - you can use plot fill.
Fill and borders of time plot is configured in <background> subnode of <plot> node. XML below shows how to create an crazy eye-dusturbing gradient fill with a thick border:
<timeline>
<plot>
<background>
<fill enabled="true" type="Gradient">
<gradient angle="45">
<key color="LightOrange" />
<key color="White" />
</gradient>
</fill>
<border enabled="true" color="Green" thickness="2" />
</background>
</plot>
</timeline>
</anygantt>
Live sample below shows the settings in work:
![]() |