Vertical divisional lines are vertical lines running through the canvas in a line/area chart. They help in relating the data to its respective label, when there is large amount of data.
You can put vertical div lines in your chart by using the numVDivLines attribute.
<chart numVDivLines='10'>
You can customize the looks of the vertical divisional lines using the following attributes:
| Attribute Name | Range | Description |
| vDivLineColor | Color of vertical axis division lines. | |
| vDivLineThickness | In Pixels | Thickness of vertical axis division lines. |
| vDivLineAlpha | 0-100 | Alpha of vertical axis division lines. |
The vertical divisional line can be made dashed using vDivLineIsDashed='1'.
The dash properties - dash length and dash gap can be customized using the vDivLineDashLen & vDivLineDashGap attributes respectively.
<chart numVDivLines='10' vDivLineIsDashed='1' vDivLineDashLen='2' vDivLineDashGap='2' ...>
The chart with the above properties would look as under:
The vertical grid bands appear alternately between the vertical divisional lines. They can be displayed by setting showAlternateVGridColor='1'.
<chart showAlternateVGridColor='1' ...>
The chart with the alternate vertical grid bands would look as under:
The color and alpha of the alternate vertical grid bands can be customized using the alternateVGridColor and alternateVGridAlpha attributes respectively.
<chart showAlternateVGridColor='1' alternateVGridColor='D9E5F1' alternateVGridAlpha='100'...>
Animation effects can be applied to the alternate vertical grid bands using STYLES. The following data would animate the y-Scale and the alpha of the horizontal grid bands.
<chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales' showValues='0' numVDivLines='2' showAlternateVGridColor='1'>
<set label='Qtr 1' value='420500' />
<set label='Qtr 2' value='295400' />
<set label='Qtr 3' value='523400' />
<set label='Qtr 4' value='465400' />
<styles>
<definition>
<style name='myAnim1' type='animation' param='_yScale' start='0' duration='1'/>
<style name='myAnim2' type='animation' param='_alpha' start='0' duration='1'/>
</definition>
<application>
<apply toObject='VGRID' styles='myAnim1, myAnim2' />
</application>
</styles>
</chart>{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"Figures in $",
"xaxisname":"Quarter",
"yaxisname":"Sales",
"showvalues":"0"
},
"data":[{
"label":"Qtr 1",
"value":"420500"
},
{
"label":"Qtr 2",
"value":"295400"
},
{
"label":"Qtr 3",
"value":"523400"
},
{
"label":"Qtr 4",
"value":"465400"
}
],
"trendlines":[{
"line":[{
"startvalue":"430000",
"endvalue":"450000",
"color":"009933",
"istrendzone":"1",
"displayvalue":"Target"
}
]
}
]
}