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

Here we will have a look at the Circle Annotation. A circle annotation looks as under:

 
The XML/JSON data to create the above circle is:
  
<chart>
         ...
         <annotations>
            <annotationGroup id='Grp1'  x='200' y='200' >
               <annotation type='circle' color='639ACE' radius='50'/>
            </annotationGroup>
         </annotations>
         ...
</chart>
{
  "chart": {},
  ...
  "annotations": {
    "groups": [
      {
        "id": "Grp1",
        "x": "200",
        "y": "200",
        "items": [
          {
            "type": "circle",
            "color": "639ACE",
            "radius": "50"
          }
        ]
      }
    ]
    ...
  }
}
 
As it is very clear from the code above, we need to set the annotation type to circle, specify the starting x and y co-ordinates, radius and also a color for the circle.
 
Adding a gradient fill to the circle
 
Now, suppose we want the circle to have a gradient background.
 
 
All we need to do is change the code to the following.
  
<chart>
         ...
         <annotations>
            <annotationGroup id='Grp1' x='200' y='200' >
               <annotation type='circle' color='639ACE,FFFFFF' radius='50'/>
            </annotationGroup>
         </annotations>
         ...
</chart>
{
  "chart": {},
  ...
  "annotations": {
    "groups": [
      {
        "id": "Grp1",
        "x": "200",
        "y": "200",
        "items": [
          {
            "type": "circle",
            "color": "639ACE,FFFFFF",
            "radius": "50"
          }
        ]
      }
    ]
    ...
  }
}
 
Thus all we have done is added FFFFFF to the color list to make a gradient. You can add as many colors as you want to this gradient color list. By default, the gradient pattern for a circle is radial. To make the same as linear, we need to set fillPattern='linear'.
 
 
When using linear gradient pattern, you can customize the gradient angle using the fillAngle attribute. Setting fillAngle='90' will yield:
 
 
Let's return back to our radial gradient and change the ratio in which the colors in the gradient are distributed. For that, we need to use the fillRatio attribute. Setting it to fillRatio='60,40' will make the annotation look as under:
 
 
Thus, whenever we are using the fillRatio attribute, we need to make sure that the no. of values in the attribute should be equal to the no. of colors in the gradient and the sum of all the values should be 100.
 
Adding a border to the circle and customizing it
 
Now to add a border to the circle, all we need to do is add showBorder='1' to the <annotation> element.
 
 
The border color and thickness can be customized using the borderColor and borderThickness attributes. Setting borderColor='333333' and borderThickness='4' will give:
 
 
Thus, the final XML/JSON will look as under:
  
<chart>
   ...
   <annotations>
      <annotationGroup id='Grp1' x='200' y='200' >
         <annotation type='circle' color='639ACE,FFFFFF' radius='50' fillPattern='linear' showBorder='1' 
          borderColor='333333' borderThickness='4'/>
      </annotationGroup>
   </annotations>
   ...
</chart>
{
  "chart": {},
  ...
  "annotations": {
    "groups": [
      {
        "id": "Grp1",
        "x": "200",
        "y": "200",
        "items": [
          {
            "type": "circle",
            "color": "639ACE,FFFFFF",
            "radius": "50",
            "fillpattern": "linear",
            "showborder": "1",
            "bordercolor": "333333",
            "borderthickness": "4"
          }
        ]
      }
    ]
...
  }
}
 
The various attributes for the circle annotation using which it can be customized are:
 
Attribute Name Type / Range Description
type Rectangle, Circle, Polygon, Line, Arc, Text, Image Needs to be set to Circle to create a circle annotation type.
x Number The center x co-ordinate for the annotation. This x co-ordinate is relative to the x co-ordinate of the annotation group in which the annotation is placed. For example, if you have set the x co-ordinate of the annotation group as 50 and the x co-ordinate of the annotation is 100, then the effective x co-ordinate of the annotation will be 150, w.r.t to the starting position of the chart.
y Number The center y co-ordinate for the annotation. This again is relative to the starting y co-ordinate of the annotation group in which the annotation is placed.
radius Number The radius of the circle.
yRadius Number The y-radius of the circle. Allows you to stretch or compress the annotation vertically.
color Hex Color (without the '#') A generic color for the annotation from which fill color and border color (whichever applies) will be derived automatically.
alpha Number(1-100) The alpha(transparency) of the annotation. By default, it will be set to 100.
startAngle Number (0-360) This attribute is used to set the starting angle for a circle, arc or polygon. For example, if you need to draw a semi-circle or a semi-circular arc, then set startAngle="0" and endAngle="180" for the respective annotation. Similarly for a polygon, if you need to draw a diamond shape, then set sides="4" and the startAngle="90".
endAngle Number (0-360) This attribute is used to set the ending angle for a circle or arc.
 
Fill and Border properties
fillColor Hex code (separated by commas if there are multiple codes for a gradient) This attribute sets the background fill color for the annotation. You can set any hex color code as the value of this attribute. To specify a gradient as background color, separate the hex color codes of each color in the gradient using comma.
Example: FF5904, FFFFFF. Remember to remove # and any spaces in between. See the gradient specification page for more details.
fillAlpha Number (0-100) Sets the alpha (transparency) for the background fill. If you've opted for gradient background, you need to set a list of alpha(s) separated by comma. If the number of alpha values you have specified is lesser than the number of colors in the gradient, then the remaining colors will by default have an alpha of 100.
fillRatio Number (0-100) If you've opted for a gradient background fill, this attribute lets you set the ratio of each color constituent. The ratio for the colors should be separated by commas and the same must sum up to 100. For example, if you have 2 colors in your gradient, then fillRatio could be 80,20. There should be no spaces in between the values.
fillAngle Number (0-360) Angle of the background fill color, in case of a gradient. Every color in the gradient can have a fill angle (which has to be separated by commas without any spaces in between). If the number of angle values is less than the number of colors in the gradient, then a default value of 0 is taken for the remaining colors. For example, fillAngle='90, 270' for a gradient having 2 colors.
fillPattern Radial/Linear The pattern of the gradient. It takes a default value of radial for circle.
showBorder Boolean (0/1) Whether to show a border for the annotation.
borderColor Hex code (without the '#') The border color of the annotation if showBorder='1'.
borderThickness Number (Pixels) The border thickness of the annotation if showBorder='1'.
borderAlpha Number (0-100) The border alpha(transparency) of the annotation if showBorder='1'.
 
Application
 
 
The XML/JSON for the above is:
  
<chart ... manageResize='1' origW='270' origH='270'>
         ...
   <annotations>
      <!--Circles behind the gauge-->
       <annotationGroup id='Grp1' showBelow='1' x='135' y='135' >
         <annotation type='circle' color='EBF0F4,85898C,484C4F,C5C6C8' fillRatio='30,30,30,10' 
          fillAngle='270' radius='120' fillPattern='linear' />
         <annotation type='circle' color='8E8E8E,83878A,E7E7E7' fillAngle='270' radius='105' 
          fillPattern='linear' />
         <annotation type='circle' color='07476D,19669E,186AA6,D2EAF6' fillRatio='5,45,40,10' fillAngle='270' 
          radius='103' fillPattern='linear' />
         <annotation type='circle' color='07476D,19669E,07476D' fillRatio='5,90,5' fillAngle='270' 
          radius='100' fillPattern='linear' />
       </annotationGroup>       
      <!--Circle behind the pivot-->
        <annotationGroup id='Grp2' showBelow='1' x='135' y='135' >
           <annotation type='circle' radius='12' color='012A46' />
        </annotationGroup>
     </annotations>
     ...
  </chart>
{
  "chart": {... "manageResize": "1", "origW": "270", "origH": "270" ...},
  ...
  /* Circles behind the gauge */
  "annotations": {
    "groups": [
      {
        "id": "Grp1",
        "showbelow": "1",
        "x": "135",
        "y": "135",
        "items": [
          {
            "type": "circle",
            "color": "EBF0F4,85898C,484C4F,C5C6C8",
            "fillratio": "30,30,30,10",
            "fillangle": "270",
            "radius": "120",
            "fillpattern": "linear"
          },
          {
            "type": "circle",
            "color": "8E8E8E,83878A,E7E7E7",
            "fillangle": "270",
            "radius": "105",
            "fillpattern": "linear"
          },
          {
            "type": "circle",
            "color": "07476D,19669E,186AA6,D2EAF6",
            "fillratio": "5,45,40,10",
            "fillangle": "270",
            "radius": "103",
            "fillpattern": "linear"
          },
          {
            "type": "circle",
            "color": "07476D,19669E,07476D",
            "fillratio": "5,90,5",
            "fillangle": "270",
            "radius": "100",
            "fillpattern": "linear"
          }
        ]
      },
      /* Circle behind the pivot */
      {
        "id": "Grp2",
        "showbelow": "1",
        "x": "135",
        "y": "135",
        "items": [
          {
            "type": "circle",
            "radius": "12",
            "color": "012A46"
          }
        ]
      }
    ]
...
  }
}