Positioning Annotations Using Absolute Values

Prerequisites

The FusionCharts XT annotation API lets you configure positions of annotations either during their creation or after rendering them on a chart/gauge. You can position annotation items by setting the positioning attributes (x, y, toX, toY, radius, and so on) to the required coordinates.

Annotations can be positioned using:

  • absolute values

  • macros - that take dynamic values relative to chart elements

This article describes how you can position annotations using static values.

A spline chart with a rectangle annotation and a text annotation positioned at the top-right corner of the canvas is shown below:

FusionCharts should load here..

The code snippet to position the rectangle annotation is given below:

...
"annotations": {
        ...
    "groups": [{
            "items": [{
                    "id": "dyn-labelBG",
                    "type": "rectangle",
                    "radius": "3",
                    "x": "290",
                    "y": "60",
                    "tox": "390",
                    "toy": "90",
                    "color": "#0075c2",
                    "alpha": "70",
                    "origW": “400”,
                    "origH": “300”
                },
                ...
            ]
        }
    ]
}
...

The attributes used for positioning annotations are:

Attribute Name Description
id Specifies the unique identification string for the group.
x Specifies the starting x coordinate position of the annotation with respect to the leftmost position (taken as 0) of the chart.
y Specifies the the starting y coordinate position of the annotation with respect to the topmost position (taken as 0) of the chart.
toX Specifies the x coordinate of the ending position of the annotation with respect to the leftmost position (taken as zero) of the chart. This attribute is applicable only to the rectangle and line annotations.
toY Specifies the y coordinate of the ending position of the annotation with respect to the topmost position (taken as zero) of the chart. This attribute is applicable only to the rectangle and line annotations.
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, it 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, it 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. 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.

The complete data structure needed to render the above chart is given below:

...

Positioning Annotations Using Macros