Annotation - Using Styles

You are viewing documentation for an older version. For current documentation - click here.

Using Styles

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

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.

XML
JSON

<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>

{
  "chart": {},
  ...
  "annotations": {
    "groups": [
      {
        "id": "Grp1",
        "items": [
          {
            "type": "rectangle",
            "color": "639ACE",
            "x": "100",
            "y": "100",
            "tox": "200",
            "toy": "200"
          }
        ]
      }
    ]
  },
  "styles": {
    "definition": [
      {
        "name": "myShadow",
        "type": "shadow",
        "distance": "10"
      }
    ],
    "application": [
      {
        "toobject": "Grp1",
        "styles": "myShadow"
      }
    ]
   ...
  }
}

Here, we have made a style called myShadow the usual way and then applied it to the annotation 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 toObject 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 is very similar to applying effects to annotations. Just that here we will use the Animation style instead of the other styles we used to apply effects.

XML
JSON

<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>

{
  "chart": {},
  ...
  "annotations": {
    "groups": [
      {
        "id": "Grp1",
        "items": [
          {
            "type": "rectangle",
            "color": "639ACE",
            "x": "50",
            "y": "50",
            "tox": "150",
            "toy": "150"
          }
        ]
      }
    ]
  },
  "styles": {
    "definition": [
      {
        "name": "myAnim",
        "type": "animation",
        "param": "_x",
        "start": "-50",
        "easing": "Bounce",
        "duration": "0.5"
      }
    ],
    "application": [
      {
        "toobject": "Grp1",
        "styles": "myAnim"
      }
    ]
   ...
  }
}

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.