FusionCharts for Flex > Quick Chart Configuration > Anchors

Each data point in a line/spline/area chart is represented by an Anchor. The anchors help identify the data point better in the chart. They also show a tooltip displaying the data point details when the mouse is hovered over them and can be linked to other pages as well.

The XML for the above chart is as follows:

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>
    <set label='Jan' value='420000' />
    <set label='Feb' value='910000' />
    <set label='Mar' value='800000' />
    <set label='Apr' value='550000' />
    <set label='May' value='810000' />
    <set label='Jun' value='510000' />
</chart> 

The anchors are displayed by default. To hide them, use the drawAnchors='0' attribute.

<chart drawAnchors='0' ...> 

Once the anchors are hidden, the tool tips for the data points would not be displayed and the links would not work either.

If you need to hide the anchors but still have tooltip and link, use:

<chart anchorAlpha='0' ... >

Customizing the anchor properties

The anchor appearance can be customized using the following attributes:

Attribute Name	Range	Description
anchorSides	3-20	This attribute sets the number of sides the anchor will have. For example, an anchor with 3 sides would represent a triangle, with 4 it would be a square and so on.
anchorRadius	In Pixels	This attribute sets the radius (in pixels) of the anchor. Greater the radius, bigger would be the anchor size.
anchorBorderColor	Hex Code	Lets you set the border color of anchors.
anchorBorderThickness	In Pixels	Helps you set border thickness of anchors.
anchorBgColor	Hex Code	Helps you set the background color of anchors.
anchorAlpha	0-100	Helps you set the alpha of entire anchors. If you need to hide the anchors on chart but still enable tool tips, set this as 0.
anchorBgAlpha	0-100	Helps you set the alpha of anchor background.

Data Highlighting

In order to highlight a particular data point, you can define its anchor properties explicitly.

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>
	<set label='Jan' value='420000' />
	<set label='Feb' value='910000' anchorSides='4' anchorRadius='6' anchorBgColor='666666' 
		anchorBorderColor='CCCCCC' anchorBorderThickness='2'/>
	<set label='Mar' value='800000' />
	<set label='Apr' value='550000' />
	<set label='May' value='810000' />
	<set label='Jun' value='510000' />
</chart>

Note that the anchor for Feb has different properties than the other anchors.

Using Styles to apply glow effect to the anchors

Using Styles, you can apply effects (shadow, glow, bevel, blur) to the anchors. Let us see how to provide a glow effect to the anchors.

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>
    <set label='Jan' value='420000' />
    <set label='Feb' value='910000' />
    <set label='Mar' value='800000' />
    <set label='Apr' value='550000' />
    <set label='May' value='810000' />
    <set label='Jun' value='510000' />
    <styles>
        <definition>
            <style name='myGlow' type='glow' color='999999' />
        </definition>
        <application>
            <apply toObject='ANCHORS' styles='myGlow' /> 
        </application>
    </styles>
</chart>

Using Styles to apply bevel effect to the anchors

The following XML would cause to provide a bevel effect to the anchors:

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0' anchorradius='4' >
    <set label='Jan' value='420000' />
    <set label='Feb' value='910000' />
    <set label='Mar' value='800000' />
    <set label='Apr' value='550000' />
    <set label='May' value='810000' />
    <set label='Jun' value='510000' />
    <styles>
        <definition>
            <style name='myBevel' type='bevel' distance='2' />
        </definition>
        <application>
            <apply toObject='ANCHORS' styles='myBevel' /> 
        </application>
    </styles>
</chart>

Animating anchors using STYLES

The anchors can be animated using STYLES. The following XML would cause to provide a bouncing effect to the anchors.

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0' anchorradius='4' >
    <set label='Jan' value='420000' />
    <set label='Feb' value='910000' />
    <set label='Mar' value='800000' />
    <set label='Apr' value='550000' />
    <set label='May' value='810000' />
    <set label='Jun' value='510000' />
    <styles>
        <definition>
            <style name='myAnim' type='animation' param='_y' start='0' easing='Bounce' duration='1'/>
        </definition>
        <application>
            <apply toObject='ANCHORS' styles='myAnim' /> 
        </application>
    </styles>
</chart>

« Trend Lines | Tool Tips »