Task Style
- Overview
- Style Application
- Task Style Parts
- Task Tooltip Configuration
- Timeline Plot Row Fill Configuration
- DataGrid Row Fill Configuration
- DataGrid Tooltip
- DataGrid Font
Overview
Task Style - is the cope-stone of tuning tasks functionality and visualization. This style is used to configure all task types: Regular Task, Summary Task and Milestone.
The illustration below shows almost every elements that are configured in task style:

Style Application
There are two options for style application: you can create reusable predefined style and then apply it to a task (each style has the unique id), or in-line in task node. Below you will find out what are pros and cons of each method.
Reusable styles give you an opportunity to describe how task should be displayed only once and then apply it when needed.
To define and apply style you should use XML as shown:
<styles>
<task_styles>
<task_style name="sampleStyle">
<row>
<fill enabled="true" type="Solid" color="Rgb(250,0,0)" opacity="0.2" />
</row>
</task_style>
</task_styles>
</styles>
<project_chart>
<tasks>
<task id="01" name="Task 01" actual_start="2008.07.07" actual_end="2008.07.16" progress="14" style="sampleStyle" />
<task id="02" name="Task 02" actual_start="2008.07.08" actual_end="2008.07.17" progress="34" style="sampleStyle" />
<task id="03" name="Task 03" actual_start="2008.07.06" actual_end="2008.07.15" progress="78" style="sampleStyle" />
<task id="04" name="Task 04" actual_start="2008.07.09" actual_end="2008.07.17" progress="23" style="sampleStyle" />
</tasks>
</project_chart>
</anygantt>
As you can see, once the style is defined in <task_styles> with certain id, you can apply it to the resource using style attribute: <task style="sampleStyle"/>
If you need to change some setting for one task only, you can avoid creation of the new style and configure task visualization in-line.
Here is a sample how style can be defined in-line:
<project_chart>
<tasks>
<task id="01" name="Task 01" actual_start="2008.07.07" actual_end="2008.07.16" progress="14" style="sampleStyle">
<style>
<row>
<fill enabled="true" type="Solid" color="Rgb(250,0,0)" opacity="0.2" />
</row>
</style>
</task>
</tasks>
</project_chart>
</anygantt>
As you can see we have <style> node within<task> node, syntax is the same for reusable and in-line style.
Setting Global Default Style
You can define named style and apply it to all elements, but this may be inconvenient when there are a lot of elements, for example periods in a project.
AnyGantt allows you to set defaults for basic styles using defaults section. See Default Styles for more.
Task Style Parts
There are three elements that present the task - Actual Task State, Task Progress and Planned Task State. Illustration below shows these three elements:

Each of these elements is configured using Bar Style. Bar style is in charge for configuration of border, fill, markers, labels and interactive states. Bar Style is described in details in Bar Style Tutorial .
Actual start time and end time is set using actual_start and actual_end attributes of <task> node, for example:
<task actual_start="2008.07.01" actual_end="2008.07.12"/>.
As said above - visual representation is configured using Bar Styles. Bar style for actual state in configured like that:
<actual>
<bar_style>
<middle>
<fill enabled="true" type="Solid" color="Gray" opacity="1" />
<border enabled="true" type="Solid" color="Black" opacity="1" />
</middle>
</bar_style>
</actual>
</task_style>
Live sample shows modified border and fill for actual state:
![]() |
To learn more about configuration like that - please refer to Bar Style Tutorial.
Task progress is optional, but it is used in the most of the cases and set using progress attribute of <task> node, for example: <task progress="72"/>.
Just as actual state the visual representation is configured using Bar Style. Here is the sample XML showing the modification of progress fill and border:
<progress>
<bar_style>
<middle>
<fill enabled="true" type="Solid" color="Gray" opacity="1" />
<border enabled="true" type="Solid" color="Black" opacity="1" />
</middle>
</bar_style>
</progress>
</task_style>
Live sample shows the same modifications:
![]() |
To learn more about configuration like that - please refer to Bar Style Tutorial.
Planned task state is optional, it set using baseline_start and baseline_end attribute in <task> node, for example:
<task baseline_start="2008.07.01" baseline_end="2008.07.12"/>.
Planned task bar is displayed under the actual bar and has its own settings. To configure planned task bar the following XML is used:
<baseline>
<bar_style>
<middle>
<fill enabled="true" type="Solid" color="Gray" opacity="1" />
<border enabled="true" type="Solid" color="Black" opacity="1" />
</middle>
</bar_style>
</baseline>
</task_style>
Live sample shows altered fill and border for planned bar:
![]() |
To learn more about configuration like that - please refer to Bar Style Tutorial.
Task Tooltip Configuration
Using Task Style you can override default tooltip in task datagrid .
XML syntax:
<tooltip enabled="true">
<text>{%Name} - CRITICAL</text>
<font face="Tahoma" size="10" bold="false" italic="false" />
<border enabled="true" type="Solid" color="DarkRed" thickness="2" />
<fill enabled="true" type="Solid" color="#FFFFFF" opacity="0.8" />
<margin left="10" right="10" top="5" bottom="5" />
</tooltip>
</task_style>
This XML shows only the basic settings, to learn more please see XML Reference.
In this sample each task has its own style that changes tooltip :
![]() |
Timeline Plot Row Fill Configuration
You can configure how task row in timeline plot looks like in normal and hovered state using <row> node.
XML look like that:
<row>
<fill enabled="true" type="Solid" color="#FF0000" opacity="0.2" />
<states>
<hover>
<fill enabled="true" type="Solid" color="#FF3333" opacity="0.5" />
</hover>
</states>
</row>
</task_style>
This XML shows only the basic settings, to learn more please see XML Reference.
Sample below shows custom timeline plot fill for three tasks and default settings for the fourth:
![]() |
DataGrid Row Fill Configuration
Besides timeline plot row fill you can set datagrid row fill. Use <row_datagrid> to do that.
XML Sample for datagrid row configuration:
<row_datagrid>
<cell>
<fill enabled="true" type="Solid" color="#FF0000" opacity="0.2" />
<states>
<hover>
<fill enabled="true" type="Solid" color="#FF3333" opacity="0.5" />
</hover>
</states>
</cell>
</row_datagrid>
</task_style>
Sample below shows custom datagrid plot fill for three tasks and default settings for the fourth:
![]() |
DataGrid Tooltip
Using Task Style you can override default tooltip in task datagrid .
XML syntax:
<row_datagrid>
<tooltip enabled="true">
<text>{%Name} - CRITICAL</text>
<font face="Tahoma" size="10" bold="false" italic="false" />
<border enabled="true" type="Solid" color="DarkRed" thickness="2" />
<fill enabled="true" type="Solid" color="#FFFFFF" opacity="0.8" />
<margin left="10" right="10" top="5" bottom="5" />
</tooltip>
</row_datagrid>
</task_style>
This XML shows only the basic settings, to learn more please see XML Reference.
In this sample each task has its own style that changes tooltip :
![]() |
DataGrid Font
Besides row fill Task style can also configure font for all cells in datagrid. You can set font for normal and hover states. the only limitation is the fact that these settings override datagrid column font settings.
Datagrid font settings configuration XML:
<row_datagrid>
<cell>
<font face="Times New Roman" size="15" bold="true" italic="false" underline="false" color="#393939" />
<states>
<hover>
<font face="Times New Roman" size="15" bold="true" italic="true" underline="true" color="#790202" />
</hover>
</states>
</cell>
</row_datagrid>
</task_style>
One style with normal and hover states and font settings is applied to all of the summary tasks in this live sample:
![]() |