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 will 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:

JSON
XML

{ "chart": { "caption": "Bakersfield Central - Total footfalls", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "No. of Visitors", "showValues": "1", "showBorder": "1", "showTooltip": "0", "formatNumberScale": "1", "theme": "fint" }, "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" }, { "id": "dyn-label", "type": "text", "fillcolor": "#ffffff", "fontsize": "10", "x": "340", "y": "75", "text": "Total: 119, 507", "origW": "400", "origH": "300" } ] } ] }, "data": [ { "label": "Mon", "value": "15123" }, { "label": "Tue", "value": "14233" }, { "label": "Wed", "value": "25507" }, { "label": "Thu", "value": "9110" }, { "label": "Fri", "value": "15529" }, { "label": "Sat", "value": "20803" }, { "label": "Sun", "value": "19202" } ] }

{
    "chart": {
        "caption": "Bakersfield Central - Total footfalls",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "No. of Visitors",
        "showValues": "1",
        "showBorder": "1",
        "showTooltip": "0",
        "formatNumberScale": "1",
        "theme": "fint"
    },
    "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"
                    },
                    {
                        "id": "dyn-label",
                        "type": "text",
                        "fillcolor": "#ffffff",
                        "fontsize": "10",
                        "x": "340",
                        "y": "75",
                        "text": "Total: 119, 507",
                        "origW": "400",
                        "origH": "300"
                    }
                ]
            }
        ]
    },
    "data": [
        {
            "label": "Mon",
            "value": "15123"
        },
        {
            "label": "Tue",
            "value": "14233"
        },
        {
            "label": "Wed",
            "value": "25507"
        },
        {
            "label": "Thu",
            "value": "9110"
        },
        {
            "label": "Fri",
            "value": "15529"
        },
        {
            "label": "Sat",
            "value": "20803"
        },
        {
            "label": "Sun",
            "value": "19202"
        }
    ]
}