FusionCharts for Flex > FusionWidgets and XML > Annotations > Using Styles

In this section, we will discuss how to apply Styles to annotations.

Applying effects

Let's say we have a rectangle like the image shown below.

To apply effects to this rectangle, we need to use Styles. Using Styles, we can apply Shadow, Glow, Bevel, and Blur effects to the rectangle. The following XML shows how to apply a shadow effect.

<chart>

...

   <annotations>

      <annotationGroup id='Grp1' >

         <annotation type='rectangle' color='639ACE' x='100' y='100' toX='200' toY='200'/>

      </annotationGroup>

   </annotations>

   <styles>

      <definition>

         <style name='myShadow' type='shadow' distance='10' />

      </definition>

      <application>

         <apply toObject='Grp1' styles='myShadow'/>

      </application>

   </styles>

...

</chart>

Here, we have made a style called myShadow, the usual way and then applied it to the annotatation group, which is referred to using its ID Grp1. So whenever you want to apply Styles to annotations, you have to make an annotation group, put the annotation in the annotation group, and then just name the ID in the toOject attribute of the <apply> element. In case you are not familiar with Styles, then please go through the 'Styles' section.

After applying the shadow the rectangle will look like:

Similarly you can apply Glow, Bevel, and Blur effects as well to the annotations.

Animating annotations

Animating annotations is very similar to applying effects to annotations. In the following XML we have applied the Animation style instead of the other styles that we used to apply effects.

<chart>

...

   <annotations>

      <annotationGroup id='Grp1' >

         <annotation type='rectangle' color='639ACE' x='50' y='50' toX='150' toY='150'/>

      </annotationGroup>

   </annotations>

   <styles>

      <definition>

         <style name='myAnim' type='animation' param='_x' start='-50' easing='Bounce' duration='0.5'/>

      </definition>

      <application>

         <apply toObject='Grp1' styles='myAnim'/>

      </application>

   </styles>

...

</chart>

We create an animation style called myAnim, which animates the x-position of the object we apply to. Here, we apply it to the annotation group Grp1, which contains the rectangle. You can place any number of annotations in Grp1 and also create any number of annotation groups. After that apply myAnim (or any other animation style) to each of them separately.