Bar Style
Overview
Bar Style - is a style used to visualize different elements on the Gantt plot. List of elements that use Bar Style for is rather numerous. These are such elements as Summary Task, Normal Task, Resource Period and Milestone. Each of these elements uses its own typical styles, that are based on Bar Style.
Bar Style consists of the following elements:
- Start Marker
- End Marker
- Middle Bar
- Set of Labels
Here is a scheme of Summary Task Style with Bar Style elements shown:
Bar-Style Application
Bar-Style is NOT applied as is to the elements of the Gantt Chart - it is used as a part of another styles, such as Task Style and Period Style.
In this tutorial general settings of Bar-Style are described, to see more detailed information about specific style application Task Project tutorials and Resource Project tutorials.
Bar Style in Task Style
To configure how task looks like, you should use Task Style. Task Style contains three Bar Styles in it - for actual, baseline and progress bars. See Task Project docs for more.
Take a look at full XML for the project with one task with a style applied. Task Style uses several bar styles:
<settings>
<background enabled="false" />
<navigation>
<buttons collapse_expand_button="false" />
</navigation>
</settings>
<timeline>
<plot line_height="30" item_height="12" item_padding="8" />
<scale start="2008.07.05" end="2008.07.18" />
</timeline>
<datagrid enabled="false" />
<styles>
<task_styles>
<task_style name="simpleTaskStyle">
<actual>
<bar_style>
<middle shape="Full">
<fill enabled="true" type="Solid" color="#EEEEEE" />
<border enabled="true" color="#999999" />
</middle>
<labels>
<label anchor="Left" halign="Near" valign="Center">
<text>{%Complete}%</text>
</label>
<label anchor="Right" halign="Far" valign="Center">
<text>{%Name}</text>
</label>
</labels>
</bar_style>
</actual>
<progress>
<bar_style>
<middle shape="Full">
<fill enabled="true" type="Solid" color="#EE8888" />
<border enabled="true" color="#AA4444" />
</middle>
</bar_style>
</progress>
</task_style>
</task_styles>
</styles>
<project_chart>
<tasks>
<task id="01" name="Sample Task 01" actual_start="2008.07.07" actual_end="2008.07.16" style="simpleTaskStyle" progress="55" />
</tasks>
</project_chart>
</anygantt>
Above you can see the Task Style named simpleTaskStyle and it is applied to the only task in this project using style attribute of <task> node. Bar Style is used twice - to configure actual task state (<actual> node) and task progress (<progress> node).
This XML above produces chart like this:
![]() |
Bar Style in Resource Project
In Resource Projects Bar Style is used to configure how resources bars look like. Bar Style is used within Period Style in this case. See more docs in about Period Styles in Resource Projects tutorials.
Take a look at full XML for the project with two resources and several periods with a style applied. Period Styles use bar style:
<settings>
<background enabled="false" />
<navigation>
<buttons collapse_expand_button="false" />
</navigation>
</settings>
<timeline>
<plot line_height="30" item_height="20" item_padding="5" />
<scale start="2008.07.06" end="2008.07.17" />
</timeline>
<datagrid enabled="true" width="65">
<columns>
<column width="60">
<header>
<text>Name</text>
</header>
<format>{%Name}</format>
</column>
</columns>
</datagrid>
<styles>
<period_styles>
<period_style name="Working">
<bar_style>
<middle>
<fill enabled="true" color="#99EE99" />
</middle>
</bar_style>
</period_style>
<period_style name="Maintance">
<bar_style>
<middle>
<fill enabled="true" color="#EEEE99" />
</middle>
</bar_style>
</period_style>
<period_style name="Broken">
<bar_style>
<middle>
<fill enabled="true" color="#EE9999" />
</middle>
</bar_style>
</period_style>
</period_styles>
</styles>
<resource_chart>
<resources>
<resource name="Server 1" id="server_1" />
<resource name="Server 2" id="server_2" />
</resources>
<periods>
<period resource_id="server_1" start="2008.07.07" end="2008.07.8" style="Working" />
<period resource_id="server_1" start="2008.07.8" end="2008.07.12" style="Maintance" />
<period resource_id="server_1" start="2008.07.12" end="2008.07.14" style="Working" />
<period resource_id="server_1" start="2008.07.14" end="2008.07.16" style="Broken" />
<period resource_id="server_2" start="2008.07.07" end="2008.07.11" style="Working" />
<period resource_id="server_2" start="2008.07.8" end="2008.07.13" style="Broken" />
<period resource_id="server_2" start="2008.07.13" end="2008.07.16" style="Maintance" />
</periods>
</resource_chart>
</anygantt>
Above you can see three different Period Styles, each contains Bar Style with a different Middle Bar fill settings. Subsequently, styles named Working, Maintains and Broken are applied to periods using style attribute, for example <period style="Broken"/>.
This XML above produces chart like this:
![]() |
Middle Bar
The basic part of the Bar Style is the Middle Bar. It is a rectangle that shows start, end and the duration of a task, task interval or a scheduled period for a resource. For any Middle Bar you can set the shape type, fill and border.
Sample XML syntax for Middle Bar:
<middle>
<fill enabled="true" type="Solid" color="DarkSeaGreen" />
<border enabled="true" color="#494949" />
</middle>
</bar_style>
Shape type defines the placement and relative thickness of the middle bar. XML for shape settings is the following:
<middle shape="Full">
</middle>
</bar_style>
The table below shows all available Middle Bar shape types:
Sample | Shape type |
---|---|
![]() |
Full |
![]() |
HalfBottom |
![]() |
HalfCenter |
![]() |
HalfTop |
![]() |
ThinBottom |
![]() |
ThinCenter |
![]() |
ThinTop |
The sample below shows a project with the several tasks, each uses the style with shape type set. Fill and border settings are also demonstrated:
![]() |
Starting and Ending Markers
Starting and Ending Markers are preset shapes that are placed in the start and at the end of the Middle Bar. By default markers are used to distinguish regular and summary task, and to draw Milestones. When you create your own style you can use custom markers to mark special or important tasks.
Here is the easiest XML of markers in Bar Style:
<start>
<marker type="Rhomb">
<fill enabled="true" type="Solid" color="Orange" />
<border enabled="true" type="Solid" color="#494949" />
</marker>
</start>
<end>
<marker type="Arrow">
<fill enabled="true" type="Solid" color="Orange" />
<border enabled="true" type="Solid" color="#494949" />
</marker>
</end>
</bar_style>
All settings for marker are defined in <marker> node. It contains settings for fill and border, marker is set using type, attribute, for example: <marker type="Arrow"/>.
The list of Marker types and names:
Sample | Marker Type |
---|---|
![]() |
Arrow |
![]() |
Circle |
![]() |
Rhomb |
![]() |
HalfBottomCircle |
![]() |
HalfCenterCircle |
![]() |
HalfTopCircle |
![]() |
ThinBottomCircle |
![]() |
ThinCenterCircle |
![]() |
ThinTopCircle |
Sample below shows different markers:
![]() |
Labels
Besides visualization of Bar itself and its markers Bar Style also contains settings of labels that belong to the task or period. User can set any number of labels, and each of them can have specific font settings, text formatting, position of anchor relative to the bar and alignment relative to binding anchor.
Simple Label Customization
To adjust settings in bar_style node use labels node, which defines a list of labels. For example let's take a look at a simple project with only four tasks. Then we apply a task style to them, that contains bar_style, and define one label of task percentage completion:
![]() |
As you can see from the example, the syntax of labels settings is very simple. By default task style contains some pre-defined labels, but when you apply your own style and add labels node in bar_style node, all default settings are reset, and new ones are used. In the example below we've added one new label. XML syntax for it is the following:
<labels>
<label anchor="Center" valign="Center" halign="Center">
<text>{%Complete}%</text>
<font face="Verdana" size="10" bold="true" color="White">
</font>
</label>
</labels>
</bar_style>
Multiple Labels
Besides one label, as it is shown in the example above, you can use any number of labels with different settings of visualization and formatting.
As an example of multiple labels usage let's have a look at a project with some tasks and add four labels with different formatting settings to them: task starting time, task ending time, progress and task name.
![]() |
XML syntax is the same as the syntax with the case of single label. The difference is that in this example we use a list of some label nodes:
<labels>
<label anchor="Center" valign="Center" halign="Center">
<text>{%Complete}%</text>
<font face="Verdana" size="10" bold="true" color="White">
</font>
</label>
<label anchor="BottomCenter" valign="Far" halign="Center" vpadding="2">
<text>{%Name}</text>
<font face="Verdana" size="10" bold="true" color="#0">
</font>
</label>
<label anchor="Left" valign="Center" halign="Near" vpadding="2">
<text>{%Start}</text>
<font face="Verdana" size="10" bold="true" color="#660000">
</font>
</label>
<label anchor="Right" valign="Center" halign="Far" vpadding="2">
<text>{%End}</text>
<font face="Verdana" size="10" bold="true" color="#660000">
</font>
</label>
</labels>
</bar_style>
Label Position
By default label is added to the center of the bar. There is a set if options which are used to configure label placement.
Anchor and alignment
There are several options that allow you to configure label position: anchor point, vertical and horizontal align, vertical and horizontal paddings. All these settings are configured in <label> node.
Full list of attributes and possible values:
Attribute | Possible Values | Description |
---|---|---|
anchor | BottomCenter BottomLeft BottomRight Center Left Right TopCenter TopLeft TopRight |
Set label anchor point. |
halign | Near Center Far |
Horizontal align of a label relative to anchor point. |
valign | Near Center Far |
Vertical align of a label relative to anchor point. |
hpadding | Any Numeric | Horizontal padding of a label relative to anchor point. |
vpadding | Any Numeric | Vertical padding of a label relative to anchor point. |
Configuring label anchor point
Label anchor point is set in anchor attribute in label node. Anchor defines a point to which a label is docked (or anchored). There are 9 anchors available, as shown on a scheme below:
XML Syntax for setting anchor:
<text>Sample Text</text>
</label>
Here is a sample with task style defined, with Bar Style and nine labels set, each label uses the different anchor:
![]() |
Horizontal and Vertical Align Settings
Besides anchor settings you can also set label align.
There are two special attributes in <label> node: valign and halign. valign sets vertical align, and halign - horizontal.
Align XML settings:
<text>Sample Text</text>
</label>
Using halign and valign you can set nine different positions for each anchor point. Table below shows all possible positions with one anchor point:

Nine tasks in the sample below show all these positions:
![]() |
Text and Formatting
AnyGantt has a wide range of features for text formatting in labels and in tooltips. You can either set static text for any selected or all tasks, or use tokens to create different labels that are based on built-in or custom tokens.
To set text in label you should use <text> subnode of <label> node. The text is set within opening and closing <text></text> tag. If you need special characters - do not forget to use CDATA.
Sample static text:
<label anchor="Center">
<text>Sample Text</text>
</label>
</labels>
Special characters sample:
<label anchor="Center">
<text><![CDATA[<TEXT>]]></text>
</label>
</labels>
Using built-in tokens
When you configure Gantt chart you supply a lot of data, like task name, start, end, progress and so on.
All these data can be used in labels using special tokens. You can use the alone or combine with static text - just as you chart requires. When real chart is displayed - tokens are replaced with actual data.
This sample shows how name token is used:
<label anchor="Center">
<text>Task Name: {%Name}</text>
</label>
</labels>
Here is a full list ob built-in tokens:
Token | Description |
---|---|
{%RowNum} | Row index (task, resource) |
{%ID} | Identifier (task, resource) |
{%Name} | Name (task, resource) |
{%ActualStart} | Actual start (task). If task has several intervals - this refers to the first interval start. |
{%ActualEnd} | Actual end (task). If task has several intervals - this refers to the last interval end. If you have resource project - the last period end. |
{%BaselineStart} | Task only. Baseline start. If task has several intervals - this refers to the first interval start. |
{%BaselineEnd} | Task only. Baseline end. If task has several intervals - this refers to the last interval start. |
{%Complete} | Task only. Progress (without %) |
{%CompleteDate} | Task only. Progress date. |
{%PeriodStart} | Resource only. Period start. |
{%PeriodEnd} | Resource only. Period end. |
{%IntervalStart} | Task only. Interval start. |
{%IntervalEnd} | Task only. Interval End. |
{%Duration} | The duration of actual time for tasks or period duration. |
{%BaselineDuration} | Task only. Baseline plan duration. |
Lets create a style with several labels. Each labels uses static text and tokens. Here is the XML:
<labels>
<label anchor="Center" valign="Center" halign="Center">
<text>{%Complete}%</text>
<font face="Verdana" size="10" bold="true" color="White">
</font>
</label>
<label anchor="BottomCenter" valign="Far" halign="Center" vpadding="2">
<text>Task Name: {%Name}</text>
<font face="Verdana" size="10" bold="true" color="#000066">
</font>
</label>
<label anchor="Left" valign="Center" halign="Near" vpadding="2">
<text>
Start Date:
{%Start}
</text>
<font face="Verdana" size="10" bold="true" color="#660000">
</font>
</label>
<label anchor="Right" valign="Center" halign="Far" vpadding="2">
<text>
Finish Date:
{%End}
</text>
<font face="Verdana" size="10" bold="true" color="#660000">
</font>
</label>
</labels>
</bar_style>
Which allows us to show chart like that:
![]() |
Using Custom Attributes as text source for the labels.
Besides of explicit setting of the label text and usage of built-in tokens you can use custom attributes attaches to resources, periods or tasks. Custom attributes can hold any data of your choice.
In XML snippet below you can see how custom attributes are defined for tasks. Each task has two attributes: Status and Person. First contains status description and second holds a name of person in charge:
<tasks>
<task id="01" name="Task 01" actual_start="2008.07.07" actual_end="2008.07.16" progress="14">
<attributes>
<attribute name="Status">In Progress</attribute>
<attribute name="Person">Steve Shafer</attribute>
</attributes>
</task>
<task id="02" name="Task 02" actual_start="2008.07.08" actual_end="2008.07.17" progress="34">
<attributes>
<attribute name="Status">Stopped</attribute>
<attribute name="Person">Donald Horn</attribute>
</attributes>
</task>
<task id="03" name="Task 03" actual_start="2008.07.06" actual_end="2008.07.15" progress="78">
<attributes>
<attribute name="Status">In Progress</attribute>
<attribute name="Person">Kevin Mitchell</attribute>
</attributes>
</task>
</tasks>
</project_chart>
When custom attributes are defined you can use them in texts of labels, you just need to use certain syntax. Below you can see XML, where label text is templated using custom attributes.
In <label> node we add <text> subnode with custom attribute token in it. The syntax of any custom attribute usage is {%ATTRIBUTE_NAME}, where ATTRIBUTE_NAME - the name of attribute.
<text>{%Status}</text>
</label>
Finally, you can take a look at the sample with three labels attached to each task, two use custom attributes, and the third uses {%Complete} token to show task progress:
<labels>
<label anchor="Center" valign="Center" halign="Center">
<text>{%Complete}%</text>
<font face="Verdana" size="10" bold="true" color="White">
</font>
</label>
<label anchor="Left" valign="Center" halign="Near">
<text>{%Status}</text>
<font face="Verdana" size="10" bold="true" color="#004900">
</font>
</label>
<label anchor="Right" valign="Center" halign="Far">
<text>{%Person}</text>
<font face="Verdana" size="10" bold="true" color="#690069">
</font>
</label>
</labels>
</bar_style>
Take a look at the live sample:
![]() |
Font settings
Each label can have own font settings. Font can be set for a whole label (unless you use HTML) and configured in <font> subnode, of <label> node. Sample XML:
<font face="Verdana" color="#252525" size="10" bold="true" italic="false" underline="false" />
<text>Sample Text</text>
</label>
Full set of font settings:
Attribute | Description |
---|---|
face | The name of the font for text |
color | Text Color |
size | The point size of text |
bold | Specifies whether the text is boldface |
italic | Indicates whether text is italicized |
underline | Indicates whether the text is underlined |
render_as_html | Sets whether text is rendered as HTML |
This sample shows several labels with different font settings:
![]() |
Using HTML Formatting
If you want to do a complex formatting of the text - consider using HTML formatting. To enable it you have to set render_as_html = "True" in <font> node. Then you need to use CDATA section with HTML tags within <format> or <text> nodes:
<font render_as_html="True" />
<text><![CDATA[ <b>Task Name:</b> {%Name} ]]></text>
</label>
Few HTML tags are supported (Flash Player limitation):
Tag | Description |
---|---|
Bold tag | The <b> tag renders text as bold. A bold typeface must be available for the font used. |
Break tag | The <br> tag creates a line break in the text field. You must set the text field to be a multi line text field to use this tag. |
Font tag | The <font> tag specifies a font or list of fonts to display the text.The font tag supports the following attributes:
|
Italic tag | The <i> tag displays the tagged text in italics. An italic typeface must be available for the font used. |
Paragraph tag | The <p> tag creates a new paragraph. You must set the text field to be a multi line text field to use this tag. The <p> tag supports the following attributes:
|
Underline tag | The <u> tag underlines the tagged text. |
Here is a sample with HTML formatted text :
![]() |