| origW |
Number |
This attribute helps you define the original width of the chart - the width of the chart when you had first created the annotations. So when you change the chart size later and want the annotations to be scaled accordingly, you can use the auto-scale feature which in turn uses the origW attribute.
So suppose when you are creating the annotation, the width of the chart is 300 and then later you change the width of the chart to 600 and want the annotations to be doubled in width, then you can use the auto-scale feature and specify origW='300'. It would automatically check the current width and scale the annotations appropriately. Please note that both the original width and height of the chart need to be set to use the auto-scale feature. |
| origH |
Number |
Similar to origW attribute, it helps you specify the original height of the chart. |
| autoScale |
Boolean(0/1) |
Allows you to auto-scale the annotations taking into account the change in width and height of the chart.
For example, if when you were creating the annotations the dimensions of the chart were 300x300 px and currently the dimensions are 600x600 px and you want the annotations o be scaled accordingly, then you have to set origW='300', origH='300' and autoScale='1'. Please note that you need to be set both origW and origH attributes to be able to use the auto-scale feature. So even when only one of the dimension parameters has changed, you have to specify both.
The scaling is constrained by default. |
| constrainedScale |
Boolean(0/1) |
Whether to use constrained scaling or not. If the width and height of the chart have changed by different values and you use the auto-scale feature, then the annotation would have constrained scaling by default, i.e. the dimensions of the annotation would change such that the shape of the annotation doesn't become distorted. But if you wish to have unconstrained scaling which might result in the annotation becoming distorted in shape, then you can set this attribute to 0. |
| scaleImages |
Boolean(0/1) |
If autoScale='1', then this attribute allows you to define whether the images in the annotations (if any) also have to be auto-scaled. |
| scaleText |
Boolean(0/1) |
If autoScale='1', then this attribute allows you to define whether the text in the annotations (if any) also have to be auto-scaled. |
| xShift |
Number (both positive and negative) |
Even after using the auto-scale feature, if you need to shift the annotations to the left or right, you can do the same using this attribute. |
| yShift |
Number (both positive and negative) |
Even after using the auto-scale feature, if you need to shift the annotations above or below, you can do the same using this attribute. |
This element helps you define an annotation group, thus allowing you to group together a number of annotations. All the annotations in the chart have to be placed in an annotation group. A chart can have any number of annotation groups, and each group can have any number of annotations within.
An <annotationGroup> element can have the following attributes: |
| id |
String |
The ID of the annotation group. Each annotation group needs to have a unique ID. |
| x |
Number |
The x co-ordinate of the annotation group. All the annotations in this group would start drawing from this x co-ordinate + the x co-ordintae of the annotation itself (if defined). |
| y |
Number |
Similar to the x co-ordinate, this attribute helps define the y co-ordinate of the annotation group. |
| alpha |
Number (0-100) |
The alpha(transparency) of the annotation group. By default, it would be set to 100. |
| xScale |
Number |
This attribute is used to scale the width of all the annotations in the annotation group in percentage. For example, if we set this attribute as 50 then all the annotations in the annotation group will be halved in width whereas 200 will make their width to double the actual width. |
| yScale |
Number |
This attribute is used to scale the height of all the annotations in the annotation group in percentage. |
| origW |
Number |
This attribute helps you define the original width of the chart - the width of the chart when you had first created the annotation group. So when you change the chart size later and want the annotations in the annotation group to be scaled accordingly, you can use the auto-scale feature which in turn uses the origW attribute. |
| origH |
Number |
Similar to origW attribute, it helps you specify the original height of the chart. |
| autoScale |
Boolean(0/1) |
Allows you to auto-scale the annotation group taking into account the change in width and height of the chart.
The scaling is constrained by default. |
| constrainedScale |
Boolean(0/1) |
Whether to use constrained scaling or not. If the width and height of the chart have changed by different values and you use the auto-scale feature, then the annotation would have constrained scaling by default, i.e. the dimensions of the annotation would change such that the shape of the annotation doesn't become distorted. But if you wish to have unconstrained scaling which might result in the annotation becoming distorted in shape, then you can set this attribute to 0. |
| scaleImages |
Boolean(0/1) |
If autoScale='1', then this attribute allows you to define whether the images in the annotation group (if any) also have to be auto-scaled. |
| scaleText |
Boolean(0/1) |
If autoScale='1', then this attribute allows you to define whether the text in the annotation group (if any) also have to be auto-scaled. |
| grpXShift |
Number (both positive and negative) |
Even after using the auto-scale feature, if you need to shift the annotation group to the left or right, you can do the same using this attribute. |
| grpYShift |
Number (both positive and negative) |
Even after using the auto-scale feature, if you need to shift the annotation group above or below, you can do the same using this attribute. |
| showBelow |
Boolean(0/1) |
Whether the annotation group would be shown above the chart or below it? |
| visible |
Boolean(0/1) |
Whether the annotation group would be visible on the chart or not? |
| toolText |
String |
This attribute allows you to define the tool-text for all the annotations in the annotation group. |
| link |
Link in FusionCharts format |
This attribute sets up a link to the given URL for all the annotations in the annotation group. For more on varius types of links supported, see the Drill Down Charts section. |
| Each annotation in the chart is defined using this element. For every annotation on the chart, there needs to be an <annotation> element. It can have the following attributes: |
| type |
Rectangle, Circle, Polygon, Line, Arc, Text, Image |
The type of the annotation you wish to draw on the chart. |
| x |
Number |
The starting 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 th effective x co-ordinate of the annotation would be 150 w.r.t to the starting position of the chart. |
| y |
Number |
The starting 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. |
| color |
Hex Color (without the '#') |
A generic color for the annotation from which font color, fill color and border color (whichever applies) will be derived automatically. |
| alpha |
Number(1-100) |
The alpha(transparency) of the annotation. By default, it would be set to 100. Applies to all but the text annotation. |
| thickness |
Number |
The thickness of the border in case of a circle, rectangle or polygon annotation and the line itself in case of a line annotation. |
| xScale |
Number |
This attribute is used to scale the width of the annotation in percentage. However, using this attribute, even the distance from the starting x co-ordinate of the annotation group to the starting x co-ordinate of the annotation itself will be scaled as per the factor given, thus displacing the annotation horizontally from its original position.
So if you want the annotation to stay its place, you can place the annotation in an annotation group at (0,0), use xScale as required and then displace the annotation group itself to what the x co-ordinate of the annotation was supposed to be. |
| yScale |
Number |
This attribute is used to scale the height of all the annotations in the annotation group in percentage. However, using this attribute, even the distance from the starting y co-ordinate of the annotation group to the starting y co-ordinate of the annotation itself will be scaled as per the factor given, thus displacing the annotation vertically from its original position. |
| radius |
Number |
The radius in case of a circle, arc or polygon. The rounding radius in case of a rectangle. |
| yRadius |
Number |
The y-radius in case of a circle, arc or polygon. Allows you to stretch or compress the annotation vertically. |
| innerRadius |
Number |
The inner radius for an arc. By default it is 80% of outer radius. |
| toX |
Number |
The ending x co-ordinate for a line or rectangle. This co-ordinate is relative to the starting x-position of the annotation group in which the annotation is placed. |
| toY |
Number |
The ending y co-ordinate for a line or rectangle. This co-ordinate is relative to the starting y-position of the annotation group in which the annotation is placed. |
| |
| dashed |
Boolean (0 or 1) |
Whether the line would be dashed or not. |
| dashLen |
Number |
The length of the dash in the line. |
| dashGap |
Number |
The gap between 2 dashes in a line. |
| |
| url |
URL to image (.gif, ,jpeg, .swf, .png) |
The URL of the image to be used as annotation. It should be in the same domain as the chart. |
| xScale |
Number |
This attribute is used to scale the width of the image in percentage. For example, if we set this attribute as 50 then the image width will be halved whereas 200 will make its width to double the actual width. |
| yScale |
Number |
Similar to the xScale attribute, it is used to scale the height of the image in percentage. |
| |
| sides |
Number |
This attribute sets the number of sides that the required polygon would have. For example, to draw a triangle we need to set it to 3. Similarly, to draw a pentagon, you can set it as 5. |
| 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. |
| |
| label |
String |
Herein, you specify the text that you want to displayed using the text annotation. |
| align |
left/center/right |
This attribute sets the horizontal alignment of the text.
Default value: center. |
| vAlign |
top/middle/bottom |
This attribute sets the vertical alignment of the text.
Default value: middle. |
| font |
Font Face |
This attribute sets the font name in which you want the text label to be displayed in.
Default Value: Verdana |
| fontSize |
Number |
This attribute sets the font size of the text label.
Default value: 10 |
| fontColor |
Hex code (without the '#') |
This attribute sets the font color of the text label. By default, the value is the same as defined by the generic color attribute. |
| bold |
Boolean (0 or 1) |
Whether the text would be bold or not. |
| italic |
Boolean (0 or 1) |
Whether the text would be italicized or not. |
| underline |
Boolean (0 or 1) |
Whether the text would be underlined or not. |
| letterSpacing |
Number |
The letter spacing for the text.
Default value: 0. |
| leftMargin |
Number |
The margin to the left of the text. |
| bgColor |
Hex code (without the '#') |
The background color of the box in which the text is placed. |
| borderColor |
Hex code (without the '#') |
The border color of the text box. |
| wrap |
Boolean (0 or 1) |
This attribute lets you define whether you want the text to be wrapped or not to the next line. |
| wrapWidth |
Number |
The maximum width after occupying which, the remaining text(if any) would be wrapped to the next line. |
| wrapHeight |
Number |
The maximum possible height you would need for the texbox if you have set wrapping on. |
| |
| 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 would 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. Tha ratio for the colors should be separated by commas and the same must sum upto 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. Evey color in the gradient can have a fill angle (which have 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 and arc and linear for the others. |
| 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 |
Hex code (without the '#') |
The border thickness of the annotation if showBorder='1'. |
| borderAlpha |
Number (0-100) |
The border alpha(transparency) of the annotation if showBorder='1'. |