| <annotations> element |
The following attributes are used in the <annotations> element: |
| Attribute Name | Type | Description |
| 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 dynamic resizing 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 dynamic resizing feature and specify origW='300'. It will 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. Read the Dynamic Resizing page to know more. |
| origH | Number | Similar to origW attribute, it helps you specify the original height of the chart. Read the Dynamic Resizing page to know more. |
| autoScale | Boolean(0/1) | Allows you to 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 to be scaled accordingly, then you have to set origW='300', origH='300' and autoScale='1'. Please note that you need to set both origW and origH attributes to be able to use the dynamic resizing 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 dynamic resizing feature, then the annotation will have constrained scaling by default, i.e. the dimensions of the annotation will 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. Unconstrained scaling is not applicable for the circle, arc and polygon shapes when manageResize='1' is set in the <chart> element. |
| scaleImages | Boolean(0/1) | This attribute allows you to define whether the images in the annotations (if any) also have to be scaled while using the dynamic resizing feature. |
| scaleText | Boolean(0/1) | This attribute allows you to define whether the text in the annotations (if any) also have to be scaled while using the dynamic resizing feature. |
| xShift | Number (both positive and negative) | 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) | If you need to shift the annotations above or below, you can do the same using this attribute. |
| <annotationGroup> element | ||
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: |
||
| Attribute Name | Type | Description |
| id | String | The ID of the annotation group. Each annotation group needs to have a unique ID. This allows the group to be referred using: Styles, Alert Manager and JavaScript API. Read more » |
| x | Number | The x co-ordinate of the annotation group. All the annotations in this group will start drawing from this x co-ordinate + the x co-ordinate 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 will 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 dynamic resizing 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 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 dynamic resizing feature, then the annotation will have constrained scaling by default, i.e. the dimensions of the annotation will 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. Unconstrained scaling is not applicable for the circle, arc and polygon shapes when manageResize='1' is set in the <chart> element. |
| scaleImages | Boolean(0/1) | Whether the images in the annotation group (if any) also have to be scaled while using the dynamic resizing feature. |
| scaleText | Boolean(0/1) | Whether the text in the annotation group (if any) also have to be scaled while using the dynamic resizing feature. |
| xShift | Number (both positive and negative) | If you need to shift the annotation group to the left or right, you can do the same using this attribute. |
| yShift | Number (both positive and negative) | 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 will be shown above the chart or below it? |
| visible | Boolean(0/1) | Whether the annotation group will 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 various types of links supported, see the Drill-Down Charts section. |
| <annotation> element | ||
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: |
||
| Attribute Name | Type | Description |
| type | Rectangle, Circle, Polygon, Line, Arc, Text, Image | The type of the annotation you wish to draw on the chart. |
| x | Number | The starting (center for circle, arc and polygon) 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 starting (center for circle, arc and polygon) 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 will 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. |
| 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. |
| Line Annotation properties |
The following attributes are applicable only to line annotations: |
| Attribute Name | Type | Description |
| dashed | Boolean (0 or 1) | Whether the line will be dashed or not. |
| dashLen | Number | The length of the dash in the line. |
| dashGap | Number | The gap between 2 dashes in a line. |
| Image Annotation properties |
The following attributes are applicable only to image annotations: |
| Attribute Name | Type | Description |
| 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. |
| Circle/Arc/Polygon properties |
The following attributes are applicable only to circle, arc and polygon annotations: |
| Attribute Name | Type | Description |
| sides | Number | This attribute sets the number of sides that the required polygon will 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. |
| Text Annotation Properties |
The following attributes are applicable only to text annotations: |
| Attribute Name | Type | Description |
| 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 will be bold or not. |
| italic | Boolean (0 or 1) | Whether the text will be italicized or not. |
| underline | Boolean (0 or 1) | Whether the text will 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. |
| wrapWidth | Number | The maximum width after occupying which, the remaining text (if any) will be wrapped to the next line. |
| wrapHeight | Number | The maximum possible height you need for the textbox if you have set wrapping on. |
| Rectangle/Circle/Polygon/Arc properties |
The following attributes are applicable only to rectangle, circle, polygon and arc annotations: |
| Attribute Name | Type | Description |
| 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 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 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 | 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'. |