Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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:

{ "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"
        }
    ]
}
Top