Annotations > Using Styles

In this section, we will have a look at how to apply Styles to annotations.

 
Applying effects
Let's say we have a rectangle like this:
 
 
To apply effects to this rectangle, we will have to use Styles. Using Styles, we can apply Shadow, Glow, Bevel and Blur effects to the rectangle. Here we will see 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 have 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 have a look at the Styles section.

The rectangle will now look like this:

 
 
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. Just that here we will use the Animation style intead of the other styles 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 and then apply myAnim (or any other animation style) to each of them separately.