Annotation References
In the following sections, you can see an exhaustive set of attributes and macros supported by annotations in FusionCharts Suite XT.
General configuration attributes
The root annotations
object accepts a number of attributes for configuring generic aspects of annotations globally.
These attributes are defined using the code structure shown below:
{
"annotations": {
// Define the general configuration attributes here.
}
}
Attribute Name | Description |
---|---|
autoScale |
Specifies whether the annotation group will automatically scale, if chart dimensions change. Setting this attribute to 0 disables the automatic scaling of the group, setting it to 1 (default) enables it. |
constrainedScale |
Specifies whether annotations will retain their aspect ratio (the height:width ratio) when scaled. Setting this attribute to 0 will disable constrained scaling, setting it to 1 (default) will enable it. |
scaleText |
Specifies whether text annotations in an annotation group will automatically scale, if chart dimensions change. Setting this attribute to 0 (default) disables the automatic scaling of text annotations, setting it to 1 enables it. |
scaleImages |
Specifies whether image annotations in an annotation group will automatically scale, if chart dimensions change. Setting this attribute to 0 (default) disables the automatic scaling of image annotations, setting it to 1 enables it. |
xShift |
The value of this attribute is added to the x coordinate position value of the final annotation items on the x-axis. In other words, if an annotation is placed at 100 pixels left and the value of xShift is set to 50 , then the effective value of the x coordinate for the annotation adds up to 150 pixels. When applying scaling, the value of this attribute is included within the scale factor. |
yShift |
Like the xShift attribute, this attribute applies to the y-axis. |
grpXShift |
Shifts all annotation groups along the x coordinate. The difference between xShift and this attribute is that, during scaling, xShift is included within the scale factor whereas grpXShift is excluded. |
grpYShift |
Like the grpXShift attribute, this attribute applies to the y-axis. |
origW |
Specifies the original width of the chart, in which the annotation renders as intended. It is used as the reference width while automatically scaling annotations, in the event that a chart is resized. |
origH |
Specifies the original height of chart, in which the annotation renders as intended. It is used as the reference height while automatically scaling annotations, in the event that a chart is resized. |
Configure attributes for annotation groups
You can uniformly configure all annotation items contained within an annotation group, by using a number of attributes, as detailed in the list below. Group attributes inherit default values from the ones defined as root-level annotation attributes.
These attributes are defined using the code structure shown below:
{
"annotations": {
"groups": [{
//Define the group configuration attributes here.
}]
}
}
Attribute Name | Description |
---|---|
id |
Specifies a unique identification string for the annotation group. |
x |
Specifies the x coordinate of the starting position of the group with respect to the leftmost position (taken as 0) of the chart. If it is also configured individually for the annotation item(s) within the group, then the value of the x attribute for the item is set relative to the value of the x attribute for the group. |
y |
Specifies the y coordinate of the starting position of the group with respect to the topmost position (taken as 0) of the chart. If it is also configured individually for the annotation item(s) within the group, then the value of the y attribute for the item is set relative to the value of the y attribute for the group. |
autoScale |
Specifies whether the annotation group will automatically scale, if chart dimensions change. Setting this attribute to 0 disables the automatic scaling of the group, setting it to 1 (default) enables it. |
scaleText |
Specifies whether text annotations in an annotation group will automatically scale, if chart dimensions change. Setting this attribute to 0 (default) disables the automatic scaling of text annotations, setting it to 1 enables it. |
scaleImages |
Specifies whether image annotations in an annotation group will automatically scale, if chart dimensions change. Setting this attribute to 0 (default) disables the automatic scaling of image annotations, setting it to 1 enables it. |
constrainedScale |
Specifies whether annotations will retain their aspect ratio (the height:width ratio) when scaled. Setting this attribute to 0 will disable constrained scaling, setting it to 1 (default) will enable it. |
showBelow |
Specifies whether the annotation group will overlap the data plots. Setting this attribute to 0 will enable the group to overlap, setting it to 1 (default) will disable it. |
origW |
Specifies the original width of the chart, in which the annotation renders as intended. It is used as the reference width while automatically scaling annotations, in the event that a chart is resized. |
origH |
Specifies the original height of chart, in which the annotation renders as intended. It is used as the reference height while automatically scaling annotations, in the event that a chart is resized. |
xShift |
The value of this attribute is added to the x coordinate position value of the final annotation items on the x-axis. In other words, if an annotation is placed at 100 pixels left and the value of xShift is set to 50, then the effective value of the x coordinate for the annotation adds up to 150 pixels. When applying scaling, the value of this attribute is included within the scale factor. |
yShift |
Like the xShift attribute, this attribute applies to the y-axis. |
grpXShift |
Shifts all annotation groups along the x coordinate. The difference between xShift and this attribute is that, during scaling, xShift is included within the scale factor whereas grpXShift is excluded. |
grpYShift |
Like the grpXShift attribute, this attribute applies to the y-axis. |
alpha |
Specifies the transparency for the group. This attribute takes values between 0 (transparent) and 100 (opaque, default). |
visible |
Specifies the visibility of the group. Setting this value to 0 hides the group, setting it to 1 (default) shows it. |
showShadow |
Specifies whether a shadow effect will be shown for the annotation group. Setting this attribute to 1 shows the effect, setting it 0 (default) does not show the effect. |
color |
Specifies the hex color code for the annotation group. |
font |
Specifies the font family for the text annotation(s) in the annotation group. |
fontSize |
Specifies the font size for the text annotation(s). |
textAlign |
Specifies the horizontal alignment for the text annotation(s). |
textVAlign |
Specifies the vertical alignment for the text annotation(s). |
rotateText |
Specifies whether the text annotation(s) will be rotated. This attribute takes 0(default), 1, left, and right as values. |
wrapText |
Specifies whether words that are too long to fit in a line should be wrapped to the next line. Setting this attribute to 0 disables wrapping of text, setting it to 1(default) enables it. |
link |
Specifies the URL to which the user will be redirected, if the annotation group is clicked. |
toolText |
Specifies the tooltip for the annotation group. |
Configure attributes for annotation items
You can segregate attributes for annotation items into two types, common (which work for all annotation types) and ad-hoc (which only work for certain annotation types).
Common Attributes
Attribute Name | Description |
---|---|
id |
Specifies a unique identification for the annotation. This id is used to identify and change other properties of the annotation. |
type |
Specifies the type of annotation to be drawn. |
color |
Specifies the hex color code for the annotation. For example, a value of #6baa01will draw an annotation in the green color. The default value is #ff0000. |
alpha |
Specifies the transparency of the annotation. This attribute takes values between 0 (transparent) and 100 (opaque, default). |
fillColor |
Specifies a list of hex color codes, if the group has to be rendered with a gradient effect. For examplqe, "fillColor": "#ffcc66,#2deaff,#a6992a". This attribute is not applicable to the line, text, and image annotations |
fillAlpha |
Specifies the transparency of the colors specified using the fillColor attribute. This attribute takes values between 0 (transparent) and 100 (opaque, default). The number of values provided for this attribute should be the same as that for the fillColor attribute. In case the number of values is less than the number of colors provided, the last of the comma-separated values is repeated for the remaining colors. |
fillRatio |
Specifies the ratio for distribution for all colors specified as a comma-separated list to the fillColor attribute. This attribute takes values between 0 and 100. The number of values provided for this attribute should be the same as that for the fillColor attribute. In case the number of ratio values is less than the number of colors provided, the last of the comma-separated values is repeated for the remaining colors. The summation of these values should not exceed 100. |
fillAngle |
For a gradient fillColor, it specifies the angle in which the gradient will be drawn. It accepts one value between 0 to 360 in degrees. |
fillPattern |
Specifies whether the gradient fill will be linear or radial (default for circle and arc annotations). |
showborder |
Specifies whether a border will be shown around the annotation. Setting this attribute to 1 shows the border, setting it to 0 (default) hides it. |
borderColor |
Specifies the hex color code for the annotation border. For example, setting this attribute to #f8bd19 will show a yellow border around the annotation. This attribute is not applicable to the line annotation. |
borderAlpha |
Specifies the transparency of the annotation border. This attribute takes values between 0 (transparent) and 100 (opaque, default). This attribute is not applicable to the line annotation. |
borderThickness |
Specifies the thickness of the annotation border, in pixels. Default value is 2 pixels. This attribute is not applicable to the line annotation |
dashed |
Specifies whether the annotation border will be drawn using dashed lines. Setting this attribute to 1 will render the border using dashed lines, setting it to 0 (default) will render it using whole lines. For the line annotation, it renders the annotation itself as a dashed line. |
dashLen |
Specifies the length of each dash, if a dashed border is drawn for the annotation. |
dashGap |
Specifies the gap between each dash, if a dashed border is drawn for the annotation. |
toolText |
Specifies the tooltip for annotation items that is shown when the mouse pointer is hovered over it. |
link |
Specifies the URL to which the user will be redirected, if the annotation item is clicked. |
showShadow |
Specifies whether a shadow effect will be shown for the annotation group. Setting this attribute to 1 shows the effect, setting it 0 (default) does not show the effec. |
Ad Hoc Attributes
Line
Attribute Name | Description |
---|---|
type |
Set this attribute to line. |
x |
Specifies the x coordinate of the starting position of the line with respect to the leftmost position (taken as zero) of the chart. |
y |
Specifies the y coordinate of the starting position of the line with respect to the topmost position (taken as zero) of the chart. |
toX |
Specifies the x coordinate of the ending position of the line with respect to the leftmost position (taken as zero) of the chart. |
toY |
Specifies the y coordinate of the ending position of the line with respect to the topmost position (taken as zero) of the chart. |
thickness |
Specifies the thickness of the line, in pixels. |
Circle
Attribute Name | Description |
---|---|
type |
Set this attribute to circle. |
x |
Specifies the x coordinate of the center of the circle with respect to the leftmost position (taken as zero) of the chart. |
y |
Specifies the y coordinate of the center of the circle with respect to the topmost position (taken as zero) of the chart. |
radius |
Specifies the radius of the circle, in pixels. |
yRadius |
Specifies the height, in pixels, if you want to draw an oval annotation. |
startAngle |
Specifies the start angle (in degrees), if a circle has to be drawn like a wedge. For example, setting "startAngle": "0" and "endAngle": "180" will draw a semicircle. |
endAngle |
Specifies the end angle (in degrees), if a circle has to be drawn like a wedge. |
Arc
Attribute Name | Description |
---|---|
type |
Set this attribute to arc. |
x |
Specifies the x coordinate of the center of the arc with respect to the leftmost position (taken as zero) of the chart. |
y |
Specifies the y coordinate of the center of the circle with respect to the topmost position (taken as zero) of the chart. |
radius |
Specifies the outer radius of the arc, in pixels. |
innerRadius |
Specifies the inner radius of the arc, in pixels. |
startAngle |
Specifies the starting angle of the arc. This attribute takes values between 0 and 360. The default value is 0. |
endAngle |
Specifies the ending angle of the arc. This attribute takes values between 0 and 360. The default value is 360. |
Rectangle
Attribute Name | Description |
---|---|
type |
Set this attribute to rectangle. |
x |
Specifies the x coordinate of the starting position of the rectangle with respect to the leftmost position (taken as zero) of the chart. |
y |
Specifies the y coordinate of the starting position of the rectangle with respect to the topmost position (taken as zero) of the chart. |
toX |
Specifies the x coordinate of the ending position of the rectangle with respect to the leftmost position (taken as zero) of the chart. |
toY |
Specifies the y coordinate of the ending position of the rectangle with respect to the topmost position (taken as zero) of the chart. |
radius |
Specifies the radius of the edges of a rectangle, in pixels. This attribute is used when you want to render the annotation as a rounded rectangle. |
Polygon
Attribute Name | Description |
---|---|
type |
Set it to polygon. |
sides |
Specifies the number of sides for the polygon. Its value must be greater than 2. |
x |
Specifies the x coordinate of the center of the polygon with respect to the leftmost position (taken as zero) of the chart. |
y |
Specifies the y coordinate of the center of the polygon with respect to the topmost position (taken as zero) of the chart. |
radius |
Specifies the radius of the edges of a polygon, in pixels. |
Text
Attribute Name |
Description |
---|---|
type |
Set this attribute to text. |
text |
Specifies the text that is to be rendered as the annotation. |
x |
Specifies the x coordinate of the position of the text annotation with respect to the leftmost position (taken as zero) of the chart. |
y |
Specifies the y coordinate of the position of the text annotation with respect to the topmost position (taken as zero) of the chart. |
font |
Specifies the font family for the text annotation. |
fontSize |
Specifies the font size for the text annotation. |
align |
Specifies the horizontal alignment of the text annotation. This attribute takes left, center, and right as values. The default value is center. |
vAlign |
Specifies the vertical alignment of the text annotation. This attribute takes top, middle, and bottom as values. The default value is middle. |
bold |
Specifies whether the text will be in bold. Setting this attribute to 1 renders the text in bold, setting it to 0 (default) removes the bold formatting. |
italic |
Specifies whether the text will be in italic. Setting this attribute to 1 renders the text in italic, setting it to 0 (default) removes the italic formatting. |
bgColor |
Specifies the hex color code for the text annotation's background. For example, a value of #fcfc00 colors the background yellow. |
leftMargin |
Sets a fixed margin, in pixels, to the left of the text. |
rotateText |
Specifies whether the text annotation(s) will be rotated. This attribute takes 0(default), 1, left, and right as values. |
wrap |
Specifies whether text wrapping will be enabled. Setting this attribute to 1 will enable text wrapping, setting it to 0 (default) will disable it. |
wrapWidth |
Specifies the width wrapping dimension for the text. When this width is reached, it will cause the text to break into a new line. The toX and toY attributes can also be set on text if text wrapping dimensions are provided in absolute pixels from annotation group's origin coordinates. |
wrapHeight |
Like the wrapWidth attribute, this attribute applies to the height occupied by the text. Ellipses are appended to the end of text when text overflows beyond allocated vertical space of wrapHeight or toY attributes. |
Path
Attribute | Description |
---|---|
type |
Set this attribute to path. |
path |
Specifies the path command and accepts standard SVG path format. For example, the path command "M 10, 10, L 100, 100" signifies that we start drawing from the coordinate at (10,10) pixel using M ( Move to) command and draw a line up to the coordinate (100,100) pixel as specified by the L (Line to) command. |
x |
Specifies the x coordinate of the starting position of the path with respect to the leftmost position (taken as 0) of the chart. |
y |
Specifies the y coordinate of the starting position of the path with respect to the topmost position (taken as 0) of the chart. |
Iamges
Attribute |
Description |
type |
Set this attribute to image. |
url |
Specifies the location of the image file (jpeg, png, or gif) that is to be rendered on the chart. Chart rendering does not pause for the image to load and as such asynchronously draws them as and when they are loaded. In case you need to load them instantaneously, you may considering preloading the images. |
x |
Specifies the x coordinate of the starting position of the image annotation with respect to the leftmost position (taken as 0) of the chart. |
y |
Specifies the y coordinate of the starting position of the image annotation with respect to the topmost position (taken as 0) of the chart. |
xscale |
Specifies the resize value for the image width. |
yscale |
Specifies the resize value for the image height. |
Use macros to position annotations
Use the following macros to position annotations within charts and gauges:
Define the annotation position attributes (x, y, toX, toY, etc.) relative to the chart using the
$chartStartX
,$chartStartY
,$chartEndX
,$chartEndY
,$chartCenterX
,$chartCenterY
,$chartWidth
, and$chartHeight
macros.Position annotations with respect to the chart margins using the
$chartTopMargin
,$chartBottomMargin
,$chartLeftMargin
, and$chartRightMargin
macros.Position annotations relative to the chart caption and subcaption, using the
$captionStartX
,$captionStartY
,$captionEndX
,$captionEndY
,$captionWidth
,$captionHeight
,$subCaptionStartX
,$subCaptionStartY
,$subCaptionEndX
,$subCaptionEndY
,$subCaptionWidth
, and$subCaptionHeight
macros.Position annotations with respect to the canvas, using the
$canvasStartX
,$canvasStartY
,$canvasEndX
,$canvasEndY
,$canvasWidth
, and$canvasHeight
macros. Note that these macros are only applicable to Cartesian charts.Position annotations around a legend using the
$legendStartX
,$legendStartY
,$legendEndX
,$legendEndY
,$legendWidth
, and$legendHeight
macros. Note that these macros are only applicable to Cartesian charts.Position annotations around gauges using the
$gaugeStartX
,$gaugeStartY
,$gaugeEndX
,$gaugeEndY
,$gaugeCenterX
, and$gaugeCenterY
macros.Position annotations with respect to the start angle and end angle of an angular gauge, using the
$gaugeStartAngle
and$gaugeEndAngle
macros respectively.Position annotations with respect to the radius of a bulb gauge using the
$gaugeRadius
macro.Position annotations with respect to the width of the entire funnel or pyramid plot using the
$plotWidth
macro.Position annotations with respect to half-width of the entire funnel or pyramid plot, using the
$plotSemiWidth
macro.
Use sub-token macros to position annotations
Use the following sub-token macros to position annotations with respect to datasets and axes:
$dataset
Use the $dataset macro to add the position information of the plots in a dataset to the annotation. You can apply the "dataset_index [separator] set [separator] set_index [separator] position_key" sub token to the macro.
Possible values you can assign to the position_key include X
, Y
, STARTX
, STARTY
, ENDX
, ENDY
, CENTERX
, and CENTERY
.
For example, you can use the following values to position a rectangle above the second column in a column chart:
x:$dataset.0.set.1.STARTX
y:$dataset.0.set.1.STARTY
tox:$dataset.0.set.1.STARTX+100
toy:$dataset.0.set.1.STARTY-40
$yaxis
Use the $yaxis macro to add the position information of the y-axis labels to the annotation. You can apply the "yaxis_index [separator] label [separator] label_index [separator] position_key" sub token to the macro.
Possible values you can assign to the position_key include X
, Y
, STARTX
, STARTY
, ENDX
, ENDY
, CENTERX
, and CENTERY
.
For example, you can position a text on the y axis, using the following values:
x: $yaxis.0.label.1.startx -12
y: $yaxis.0.label.0.starty - 5
$xaxis
Use the $xaxis macro to add the position information of the x-axis labels to the annotation. You can apply the "xaxis_index [separator] label [separator] label_index [separator] position_key" sub-token to the macro.
Possible values you can assign to the position_key are the same as the ones you can use with the $yaxis
macro.
For example, you can position a text on the x axis, using the following values:
x: $xaxis.label.1.startx+2
y: $xaxis.label.0.starty+3