XML Attributes for Vertical Separator Lines

vLines are vertical (or horizontal in case of bar charts) separator lines that help you separate blocks of data. They can be placed between any two data points, even at irregular intervals.
 
 
The XML for the same is:
 
<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>
    <set label='Oct' value='420000' />
    <set label='Nov' value='910000' />
    <set label='Dec' value='680000' />
    <vLine/>
    <set label='Jan' value='720000' />
    <set label='Feb' value='810000' />
    <set label='Mar' value='510000' />
</chart>
 
As you can see, a vertical separator line is introduced in the chart using the <vLine> element between those <set> elements, where you want it to be placed.
 
Customizing the looks of the separator line
The looks of the vertical separator line can be customized using the attributes of the <vLine> element given below:
Attribute Name Range Description
color Hex Color This attribute defines the color of vertical separator line.
thickness In Pixels Thickness in pixels of the vertical separator line.
alpha 0-100 Alpha of the vertical separator line.
 
<vLine color='999999' thickness='2' alpha='60' />
 
Dashed vertical separator lines

The vertical separator lines can be made dashed using dashed='1' in the <vLine> element.

The dash properties - dash length and dash gap can be customized using the dashLen & dashGap attributes respectively.

 
<vLine dashed='1' dashLen='2' dashGap='2'/>
 
Using Styles to animate vertical separator lines
Animation effects can be applied to the vertical separator lines using STYLES. The following XML would animate the y-Scale of the separator lines.
 

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>
    <set label='Oct' value='420000' />
    <set label='Nov' value='910000' />
    <set label='Dec' value='680000' />
    <vLine/>
    <set label='Jan' value='720000' />
    <set label='Feb' value='810000' />
    <set label='Mar' value='510000' />
    <styles>
        <definition>
            <style name='myAnim' type='animation' param='_yScale' start='0' duration='1'/>
        </definition>
        <application>
            <apply toObject='VLINES' styles='myAnim' />
        </application>
    </styles>
</chart>